දළ විශ්ලේෂණය
ක්ලිප් පුවරුවට පිටපත් කිරීම සඳහා ප්‍රාථමික බ්‍රව්සර් ඒපීඅයි තුනක් ඇත:
- අසින්ක් ක්ලිප්බෝඩ් API
[navigator.clipboard.writeText]
- පෙළ කේන්ද්‍ර කරගත් කොටස Chrome 66 (2018 මාර්තු) හි ඇත
- ප්‍රවේශය අසමමුහුර්ත වන අතර ජාවාස්ක්‍රිප්ට් පොරොන්දු භාවිතා කරයි , ලිවිය හැකි බැවින් ආරක්ෂක පරිශීලක විමසීම් (ප්‍රදර්ශනය කරන්නේ නම්) පිටුවේ ඇති ජාවාස්ක්‍රිප්ට් වලට බාධා නොකරන්න.
- පෙළ විචල්‍යයකින් සෘජුවම ක්ලිප් පුවරුවට පිටපත් කළ හැකිය.
- HTTPS හරහා සේවය කරන පිටුවල පමණක් සහය දක්වයි.
- ක්‍රෝම් 66 හි සක්‍රීය ටැබ් වල පිටු අවසර පත්‍රයක් නොමැතිව ක්ලිප් පුවරුවට ලිවිය හැකිය.
document.execCommand('copy')
- බොහෝ බ්‍රව්සර් 2015 අප්රේල් වන විට මේ සඳහා සහය දක්වයි (පහත බ්‍රව්සර් සහාය බලන්න).
- ප්‍රවේශය සමමුහුර්තයි, එනම් ප්‍රදර්ශනය සහ පරිශීලකයා ඕනෑම ආරක්ෂක විමසුමක් සමඟ අන්තර්ක්‍රියා කිරීම ඇතුළුව සම්පූර්ණ වන තුරු පිටුවේ ජාවාස්ක්‍රිප්ට් නතර කරයි.
- පෙළ DOM වෙතින් කියවා ක්ලිප් පුවරුවේ තබා ඇත.
- පරීක්ෂා කිරීමේදී ~ අප්රේල් 2015 ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් පමණක් ක්ලිප් පුවරුවට ලිවීමේදී අවසර පෙන්වීම ඉල්ලා සිටි බව සටහන් විය.
- පිටපත් සිදුවීම අභිබවා යාම
- පිටපත් කිරීමේ සිදුවීම ඉක්මවා යාම පිළිබඳ ක්ලිප්බෝඩ් API ප්‍රලේඛනය බලන්න .
- ඕනෑම පිටපත් සිදුවීමකින් ක්ලිප් පුවරුවේ දිස්වන දේ වෙනස් කිරීමට ඔබට ඉඩ දෙයි, සරල පෙළ හැර වෙනත් දත්ත ආකෘති ඇතුළත් කළ හැකිය.
- ප්‍රශ්නයට කෙලින්ම පිළිතුරු නොදෙන බැවින් මෙහි ආවරණය නොවේ.
සාමාන්‍ය සංවර්ධන සටහන්
ඔබ කොන්සෝලය තුළ කේතය පරීක්ෂා කරන අතරතුර ක්ලිප්බෝඩ් ආශ්‍රිත විධානයන් ක්‍රියාත්මක වනු ඇතැයි අපේක්ෂා නොකරන්න. සාමාන්‍යයෙන් පිටුව සක්‍රිය වීමට අවශ්‍ය වේ (අසින්ක් ක්ලිප්බෝඩ් ඒපීඅයි) හෝ ( document.execCommand('copy')) පරිශීලක ක්ලික් කිරීමක්) ( ) පරිශීලක ක්ලික් කිරීම) ක්ලිප් පුවරුවට ප්‍රවේශ වීමට ඉඩ දීම සඳහා වැඩි විස්තර සඳහා පහත බලන්න.
වැදගත් (මෙහි සටහන් 2020/02/20)
මෙම ලිපිය මුලින් ලියා ඇති බැවින් හරස් සම්භවයක් ඇති IFRAMEs සහ අනෙකුත් IFRAME "සෑන්ඩ්බොක්සිං" මඟින් කාවැද්දූ නිරූපණ "ධාවන කේත ස්නිපෙට්" බොත්තම් සහ "codepen.io උදාහරණය" සමහර බ්‍රව්සර්වල (ක්‍රෝම් සහ මයික්‍රොසොෆ්ට් එජ් ඇතුළුව) වැඩ කිරීමෙන් වළක්වයි. ).
ඔබේම වෙබ් පිටුවක් නිර්මාණය කිරීම සංවර්ධනය කිරීම සඳහා, HTTPS සම්බන්ධතාවය හරහා එම පිටුවට සේවය කරන්න.
කේතය ක්රියා කරන ආකාරය පෙන්වන පරීක්ෂණ / ආදර්ශන පිටුවක් මෙන්න:
https://deanmarktaylor.github.io/clipboard-test/
අසින්ක් + ෆෝල්බැක්
නව අසින්ක් ක්ලිප්බෝඩ් ඒපීඅයි සඳහා බ්‍රව්සර් සහාය මට්ටම නිසා ඔබට document.execCommand('copy')හොඳ බ්‍රව්සර් ආවරණයක් ලබා ගැනීමේ ක්‍රමයට ආපසු යාමට අවශ්‍ය වනු ඇත .
මෙන්න සරල උදාහරණයක් (මෙම වෙබ් අඩවියේ කාවැද්දූ වැඩ නොකරනු ඇත, ඉහත "වැදගත්" සටහන කියවන්න):
function fallbackCopyTextToClipboard(text) {
var textArea = document.createElement("textarea");
textArea.value = text;
// Avoid scrolling to bottom
textArea.style.top = "0";
textArea.style.left = "0";
textArea.style.position = "fixed";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Fallback: Copying text command was ' + msg);
} catch (err) {
console.error('Fallback: Oops, unable to copy', err);
}
document.body.removeChild(textArea);
}
function copyTextToClipboard(text) {
if (!navigator.clipboard) {
fallbackCopyTextToClipboard(text);
return;
}
navigator.clipboard.writeText(text).then(function() {
console.log('Async: Copying to clipboard was successful!');
}, function(err) {
console.error('Async: Could not copy text: ', err);
});
}
var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
copyJaneBtn = document.querySelector('.js-copy-jane-btn');
copyBobBtn.addEventListener('click', function(event) {
copyTextToClipboard('Bob');
});
copyJaneBtn.addEventListener('click', function(event) {
copyTextToClipboard('Jane');
});
<div style="display:inline-block; vertical-align:top;">
<button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
<button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
<textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:
</textarea>
</div>
(codepen.io උදාහරණයක් වැඩ නැති විය හැකි, ඉහත "වැදගත්" සටහනක් කියවා) සටහන මෙම ඇබිත්ත Stack පමාණය ගේ කාවැද්දූ පෙරදසුනෙහි හොඳින් වැඩ කරන්නේ නැති බව ඔබ මෙහි එය කරන්න: https://codepen.io/DeanMarkTaylor/pen/RMRaJX?editors = 1011
අසින්ක් ක්ලිප්බෝඩ් API
ක්‍රෝම් 66 හි අවසර API හරහා "අවසර ඉල්ලීමට" සහ ක්ලිප්බෝඩ් වෙත ප්‍රවේශ වීමට හැකියාවක් ඇති බව සලකන්න.
var text = "Example text to appear on clipboard";
navigator.clipboard.writeText(text).then(function() {
console.log('Async: Copying to clipboard was successful!');
}, function(err) {
console.error('Async: Could not copy text: ', err);
});
document.execCommand ('copy')
මෙම ලිපියේ ඉතිරි කොටස document.execCommand('copy')API හි සූක්ෂ්ම හා විස්තර වෙත යයි .
බ්‍රව්සර් සහාය
ජාවාස්ක්‍රිප්ට් document.execCommand('copy')සහාය වර්ධනය වී ඇත, බ්‍රව්සර් යාවත්කාලීන කිරීම් සඳහා පහත සබැඳි බලන්න:
සරල උදාහරණය
(මෙම වෙබ් අඩවියේ කාවැද්දූ වැඩ නොකරනු ඇත, ඉහත "වැදගත්" සටහන කියවන්න)
var copyTextareaBtn = document.querySelector('.js-textareacopybtn');
copyTextareaBtn.addEventListener('click', function(event) {
var copyTextarea = document.querySelector('.js-copytextarea');
copyTextarea.focus();
copyTextarea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
});
<p>
<button class="js-textareacopybtn" style="vertical-align:top;">Copy Textarea</button>
<textarea class="js-copytextarea">Hello I'm some text</textarea>
</p>
සංකීර්ණ උදාහරණය: ආදානය ප්‍රදර්ශනය නොකර ක්ලිප්බෝඩ් වෙත පිටපත් කරන්න
තිරයේ දෘශ්‍යමාන textareaහෝ inputමූලද්‍රව්‍යයක් තිබේ නම් ඉහත සරල උදාහරණය විශිෂ්ට ලෙස ක්රියා කරයි .
සමහර අවස්ථාවලදී input/ textareaමූලද්‍රව්‍යයක් ප්‍රදර්ශනය නොකර පෙළ ක්ලිප් පුවරුවට පිටපත් කිරීමට ඔබට අවශ්‍ය විය හැකිය . මෙය වටා වැඩ කිරීමේ ක්‍රමයකට මෙය එක් උදාහරණයකි (මූලික වශයෙන් මූලද්රව්යය ඇතුළු කරන්න, ක්ලිප්බෝඩ් එකට පිටපත් කරන්න, මූලද්රව්යය ඉවත් කරන්න):
ගූගල් ක්‍රෝම් 44, ෆයර්ෆොක්ස් 42.0 ඒ 1 සහ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 11.0.8600.17814 සමඟ පරීක්ෂා කර ඇත.
(මෙම වෙබ් අඩවියේ කාවැද්දූ වැඩ නොකරනු ඇත, ඉහත "වැදගත්" සටහන කියවන්න)
function copyTextToClipboard(text) {
var textArea = document.createElement("textarea");
//
// *** This styling is an extra step which is likely not required. ***
//
// Why is it here? To ensure:
// 1. the element is able to have focus and selection.
// 2. if element was to flash render it has minimal visual impact.
// 3. less flakyness with selection and copying which **might** occur if
// the textarea element is not visible.
//
// The likelihood is the element won't even render, not even a
// flash, so some of these are just precautions. However in
// Internet Explorer the element is visible whilst the popup
// box asking the user for permission for the web page to
// copy to the clipboard.
//
// Place in top-left corner of screen regardless of scroll position.
textArea.style.position = 'fixed';
textArea.style.top = 0;
textArea.style.left = 0;
// Ensure it has a small width and height. Setting to 1px / 1em
// doesn't work as this gives a negative w/h on some browsers.
textArea.style.width = '2em';
textArea.style.height = '2em';
// We don't need padding, reducing the size if it does flash render.
textArea.style.padding = 0;
// Clean up any borders.
textArea.style.border = 'none';
textArea.style.outline = 'none';
textArea.style.boxShadow = 'none';
// Avoid flash of white box if rendered for any reason.
textArea.style.background = 'transparent';
textArea.value = text;
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
document.body.removeChild(textArea);
}
var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
copyJaneBtn = document.querySelector('.js-copy-jane-btn');
copyBobBtn.addEventListener('click', function(event) {
copyTextToClipboard('Bob');
});
copyJaneBtn.addEventListener('click', function(event) {
copyTextToClipboard('Jane');
});
<div style="display:inline-block; vertical-align:top;">
<button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
<button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
<textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:
</textarea>
</div>
අමතර සටහන්
පරිශීලකයා ක්රියා කරන්නේ නම් පමණක් ක්‍රියාත්මක වේ
සියලුම document.execCommand('copy')ඇමතුම් පරිශීලක ක්‍රියාවක result ජු ප්‍රති result ලයක් ලෙස සිදුවිය යුතුය, උදා: සිදුවීම් හසුරුවන්න ක්ලික් කරන්න. මෙය පරිශීලකයාගේ ක්ලිප්බෝඩ් එක අපේක්ෂා නොකරන විට අවුල් වීම වැළැක්වීමේ පියවරකි.
වැඩි විස්තර සඳහා ගූගල් සංවර්ධකයින්ගේ සටහන බලන්න .
ක්ලිප්බෝඩ් API
සම්පූර්ණ ක්ලිප්බෝඩ් API කෙටුම්පත් පිරිවිතර මෙහි සොයාගත හැකි බව සලකන්න:
https://w3c.github.io/clipboard-apis/
එයට සහාය ලැබේද?
document.queryCommandSupported('copy')true"බ්‍රව්සරයෙන් සහය දක්වන්නේ නම්" විධානය නැවත පැමිණිය යුතුය .- හා
document.queryCommandEnabled('copy')නැවත trueනම්, document.execCommand('copy')දැන් ලෙස නම් සාර්ථක වනු ඇත. පරිශීලකයා විසින් ආරම්භ කරන ලද නූල් එකකින් විධානය කැඳවා ඇති බව තහවුරු කර ගැනීම සඳහා පරීක්ෂා කිරීම සහ වෙනත් අවශ්‍යතා සපුරාලනු ලැබේ.
කෙසේ වෙතත්, බ්‍රව්සර් අනුකූලතා ගැටළු සඳහා උදාහරණයක් ලෙස, ගූගල් ක්‍රෝම් ~ අප්රේල් සිට 2015 ඔක්තෝබර් trueදක්වා ආපසු පැමිණියේ document.queryCommandSupported('copy')පරිශීලක ආරම්භක නූල් එකකින් විධානය කැඳවනු ලැබුවහොත් පමණි .
අනුකූලතා විස්තර පහත සටහන් කරන්න.
බ්‍රව්සර් අනුකූලතා විස්තරය
පරිශීලක ක්ලික් කිරීමක ප්‍රති called ලයක් ලෙස / බ්ලොක් document.execCommand('copy')එකක ඔතා ඇති සරල ඇමතුමක් ඔබට වඩාත්ම ගැළපුම ලබා දෙනු ඇත පහත සඳහන් විධිවිධාන ඇත:trycatch
ඕනෑම ඇමතුමක් document.execCommand, document.queryCommandSupportedහෝ / බ්ලොක් document.queryCommandEnabledඑකකින් ඔතා තිබිය යුතුය .trycatch
විවිධ බ්‍රව්සර් ක්‍රියාත්මක කිරීම් සහ බ්‍රව්සර් අනුවාදයන් නැවත පැමිණීම වෙනුවට කැඳවූ විට විවිධ ආකාරයේ ව්‍යතිරේකයන් විසි falseකරයි.
විවිධ බ්‍රව්සර් ක්‍රියාත්මක කිරීම් තවමත් ප්‍රවාහයේ පවතින අතර ක්ලිප්බෝඩ් ඒපීඅයි තවමත් කෙටුම්පතේ ඇත, එබැවින් ඔබේ පරීක්ෂණය සිදු කිරීමට මතක තබා ගන්න.