html input粘贴功能,原生js实现复制粘贴功能

点击按钮实现复制功能

copyText: function(message) {

var input = document.createElement("input");

input.value = message;

document.body.appendChild(input);

input.select();

input.setSelectionRange(0, input.value.length);

document.execCommand('Copy');

document.body.removeChild(input);

}

关键的方法是 select, setSelectionRange, execCommand

select是获取焦点， document.execCommand('Copy')，execCommand命令是操纵可编辑区域的元素，参数为copy是执行选中区域的复制，，好像这两个加起来也能达到我们想要的效果。事实上，安卓机和pc上确实没问题的，但是苹果机上却不兼容。

这时候关键的setSelectionRange开始表演了。

HTMLInputElement.setSelectionRange()方法用来设置元素当前选中的文本的开始和结束位置。记住一定是input,我用textarea也没问题。input.setSelectionRange(0, input.value.length)表示从input的第0到结尾的进行选中。

所以上面的函数连起来就是：创建一个input框，把文字赋值为input, input获取焦点，选中input中的文字，对文字进行复制，复制完成后删除input.

html input粘贴功能,原生js实现复制粘贴功能相关推荐

JS实现复制粘贴的方式
最近在项目中遇到了需要复制粘贴的功能,虽然是个简单的小功能,我竟然没做过,所以根据查找的资料还有实践在这里总结一下: JS实现复制粘贴方式: 原生通过document.execCommand('cop ...
java循环购物车结算系统_原生JS实现购物车结算功能代码
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD ...
简易灯箱画廊设计html,原生Js实现的画廊功能
原生Js实现画廊功能,点击图片,在下方出现相应放大图片.给a标签绑定onclick点击事件.这里上方的小图和下方将要展示大图,都是同一张图片,只是上下两个img的style中设置了不同的width和h ...
原生js调用手机拍照功能
原生js调用手机拍照功能此功能主要用于混合App开发时手机拍照上传图片的功能! 话不多说直接上代码! 注:此代码在浏览器中运行时会报错,必须打开调试功能在手机上运行才可以! // html部分 // ...
怎样编写html购物车结算页面,原生JS实现购物车结算功能
原生JS实现购物车结算功能 @charset "utf-8"; *{margin:0;padding:0;list-style-type:none;} a{color:#666;t ...
windows粘贴板失效，不能复制粘贴解决
windows粘贴板失效,不能复制粘贴解决 windows粘贴板失效 windows粘贴板失效之前遇到过几次粘贴板失效,检索答案后,90%的都是重启粘贴板进程,但效果却不尽人意,记录一个我自己试过后 ...
js实现复制粘贴功能
在项目中使用到复制粘贴功能,虽然网上有很多大牛封装了很多的插件,但是还是想不去使用插件,就像自己来实现这个功能. 初步想法: 1. 获取到需要复制的内容,这里我可以将需要复制的内容放在input或者t ...
JS一键复制粘贴功能
使用clipboard.js 实现: 它是一个不需要Flash,就能实现文本复制或者剪切到剪切板的轻量级插件: 具体实例: 可以使用cdn 或者直接下载设置好引用路径. <!DOCTYPE h ...
最新js实现复制粘贴功能实例
功能:实现鼠标点击复制内容描述:使用与手机网站.pc等端. 实现点击复制粘贴功能的代码实例: function common_copy(text){if(text.indexOf('-') !== ...
js html table转excel文件 js获取(复制 / 粘贴板)的内容js复制table粘贴到excel中
js html table转excel文件参考资料: 70行代码实现vue+sheetJs导出excel功能 sheetJs的git项目代码代码太长建议直接粘贴复制 <!DOCTYPE ht ...

html input粘贴功能,原生js实现复制粘贴功能

html input粘贴功能,原生js实现复制粘贴功能相关推荐

最新文章

热门文章