原生js实现按钮复制功能 (附doucment指令大全)

文章提供了一段JavaScript代码示例,展示了如何通过添加事件监听器在用户点击时复制文本。代码主要利用`document.getElementById`获取元素和`document.execCommand`命令来实现文本的选择和复制到剪贴板的功能。
摘要由CSDN通过智能技术生成

话不多说,直接上代码

 <div id="copy" data-id="copy">复制</div>
    <input type="text" id="input" />
let input = document.getElementById('input');
    let copy = document.getElementById('copy');
    copy.addEventListener('click', function () {
      console.log(input.value);
      input.select(); //选中需复制的内容
      // 原生指令 document.execCommand('word')
      document.execCommand('copy'); //copy
    });

ps:doucment指令大全
document.execCommand(‘word’);

2D-Position //允许通过拖曳移动绝对定位的对象。
AbsolutePosition //设定元素的position属性为“absolute”(绝对)。
BackColor //设置或获取当前选中区的背景颜色。
BlockDirLTR //目前尚未支持。
BlockDirRTL //目前尚未支持。
Bold //切换当前选中区的粗体显示与否。
BrowseMode //目前尚未支持。
Copy //将当前选中区复制到剪贴板。
CreateBookmark //创建一个书签锚或获取当前选中区或插入点的书签锚的名称。
CreateLink //在当前选中区上插入超级链接,或显示一个对话框允许用户指定要为当前选中区插入的超级链接的URL。
Cut //将当前选中区复制到剪贴板并删除之。
Delete //删除当前选中区。
DirLTR //目前尚未支持。
DirRTL //目前尚未支持。
EditMode //目前尚未支持。
FontName //设置或获取当前选中区的字体。
FontSize //设置或获取当前选中区的字体大小。
ForeColor //设置或获取当前选中区的前景(文本)颜色。
FormatBlock //设置当前块格式化标签。
Indent //增加选中文本的缩进。
InlineDirLTR //目前尚未支持。
InlineDirRTL //目前尚未支持。
InsertButton //用按钮控件覆盖当前选中区。
InsertFieldset //用方框覆盖当前选中区。
InsertHorizontalRule //用水平线覆盖当前选中区。
InsertIFrame //用内嵌框架覆盖当前选中区。
InsertImage //用图像覆盖当前选中区。
InsertInputButton //用按钮控件覆盖当前选中区。
InsertInputCheckbox //用复选框控件覆盖当前选中区。
InsertInputFileUpload //用文件上载控件覆盖当前选中区。
InsertInputHidden //插入隐藏控件覆盖当前选中区。
InsertInputImage //用图像控件覆盖当前选中区。
InsertInputPassword //用密码控件覆盖当前选中区。
InsertInputRadio //用单选钮控件覆盖当前选中区。
InsertInputReset //用重置控件覆盖当前选中区。
InsertInputSubmit //用提交控件覆盖当前选中区。
InsertInputText //用文本控件覆盖当前选中区。
InsertMarquee //用空字幕覆盖当前选中区。
InsertOrderedList //切换当前选中区是编号列表还是常规格式化块。
InsertParagraph //用换行覆盖当前选中区。
InsertSelectDropdown //用下拉框控件覆盖当前选中区。
InsertSelectListbox //用列表框控件覆盖当前选中区。
InsertTextArea //用多行文本输入控件覆盖当前选中区。
InsertUnorderedList //切换当前选中区是项目符号列表还是常规格式化块。
Italic //切换当前选中区斜体显示与否。
JustifyCenter //将当前选中区在所在格式化块置中。
JustifyFull //目前尚未支持。
JustifyLeft //将当前选中区所在格式化块左对齐。
JustifyNone //目前尚未支持。
JustifyRight //将当前选中区所在格式化块右对齐。
LiveResize //迫使MSHTML编辑器在缩放或移动过程中持续更新元素外观,而不是只在移动或缩放完成后更新。
MultipleSelection //允许当用户按住Shift或Ctrl键时一次选中多于一个站点可选元素。
Open //打开。
Outdent //减少选中区所在格式化块的缩进。
OverWrite //切换文本状态的插入和覆盖。
Paste //用剪贴板内容覆盖当前选中区。
PlayImage //目前尚未支持。
Print //打开打印对话框以便用户可以打印当前页。
Redo //重做。
Refresh //刷新当前文档。
RemoveFormat //从当前选中区中删除格式化标签。
RemoveParaFormat //目前尚未支持。
SaveAs //将当前Web页面保存为文件。
SelectAll //选中整个文档。
SizeToControl //目前尚未支持。
SizeToControlHeight //目前尚未支持。
SizeToControlWidth //目前尚未支持。
Stop //停止。
StopImage //目前尚未支持。
StrikeThrough //目前尚未支持。
Subscript //目前尚未支持。
Superscript //目前尚未支持。
UnBookmark //从当前选中区中删除全部书签。
Underline //切换当前选中区的下划线显示与否。
Undo //撤消。
Unlink //从当前选中区中删除全部超级链接。
Unselect //清除当前选中区的选中状态。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值