Maison > Article > interface Web > Réponse détaillée au presse-papiers des opérations JS

Réponse détaillée au presse-papiers des opérations JS

亚连original: 2018-06-06 10:13:511921parcourir

Cet article explique comment utiliser JS pour utiliser la fonction presse-papiers et partage l'exemple de code. Les amis qui en ont besoin peuvent l'apprendre.

Javascript peut facilement manipuler le contenu du presse-papiers du client, mais il n'est applicable qu'aux navigateurs IE5 et supérieurs.

Javascript peut utiliser l'objet window.clipboardData pour gérer le contenu du presse-papiers.

Méthode setData(param1, param2) pour enregistrer dans le presse-papiers.

param1 : type de données texte ou URL, etc.

param2 : contenu des données.

La méthode de lecture des données du presse-papiers getdata(param1)

La méthode d'effacement des données clearData(param1)

<HTML>  
<HEAD>  
<TITLE>测试操作剪贴板</TITLE>  
</HEAD>  
<script>  
function copyToClipboard()  
{  
 var d=document.all("source").value;  
 window.clipboardData.setData(&#39;text&#39;,d);  
}  
</script>  
<BODY>  
<button onclick="copyToClipboard();">拷贝</button>  
<input type="text" size=20 id="source" value="测试数据">  
<br>  
<button onclick="alert(window.clipboardData.getData(&#39;text&#39;));">显示</button>  
<button onclick="window.clipboardData.clearData(&#39;text&#39;);">清空</button>  
</BODY>  
</HTML>  

下面是另一个例子实现页面中选中字符，并拖拉到文本区功能。注意其中的window.event.dataTransfer对象也可处理剪贴板内容，不过只能用在 drag-and-drop 操作中。
<HTML>  
<HEAD>  
<TITLE>测试操作剪贴板2</TITLE>  
</HEAD>  
<script>  
function transferDrop() {  
   window.event.srcElement.innerText = window.event.dataTransfer.getData("text");  
   window.event.returnValue = false;  
}  
function transferDrag() {  
 window.event.dataTransfer.dropEffect = &#39;move&#39;;  
 window.event.returnValue = false;  
}  
</script>  

<BODY>
<p id="mySource" ondragstart="window.event.dataTransfer.effectAllowed = &#39;move&#39;;">选择我们并把我们拖到下面的textarea</p>  
<textarea id="myTarget" ondrop="transferDrop();" ondragover="window.event.returnValue = false;" ondragenter="transferDrag();">  
</textarea>
</BODY>  
</HTML>

Ce qui précède est ce que j'ai compilé pour tout le monde Oui, j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Utiliser le recadrage gm pour synthétiser des images sous Nodejs

Comment utiliser le tutoriel d'installation et de configuration de Babel

Comment configurer le fichier de configuration Babel dans vue-cli

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Utilisez les bases de Vue pour créer des ajouts, des suppressions, des modifications et des requêtesArticle suivant：Utilisez les bases de Vue pour créer des ajouts, des suppressions, des modifications et des requêtes

Articles Liés

Voir plus