JavaScript 实现输入框内容一键复制(附上 Vue 3 实现方式)
时间:2022-07-26
本文章向大家介绍JavaScript 实现输入框内容一键复制(附上 Vue 3 实现方式),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、JS 实现方式
实现代码:
<input type="text" ref="inputText" />
<button>一键复制</button>
const copyButton = document.getElementsByTagName("button")[0];
const inputText = document.getElementsByTagName("input")[0];
copyButton.addEventListener("click", () => {
inputText.select();
document.execCommand("copy");
});
二、Vue3 实现方式
实现代码:
<input type="text" ref="inputText"/>
<button @mousedown="clickCopy">一键复制</button>
const inputText = ref({} as unknown);
const clickCopy = () => {
(inputCode.value as HTMLInputElement).select();
document.execCommand("copy");
};
- 联众互动收购3家棋牌游戏公司,其域名买自蔡文胜手中
- 未来有什么工作绝对不会被人工智能取代
- WordPress在RSS Feed 中输出版权信息
- WordPress免插件仅代码实现文章浏览次数的方法(2)
- 苹果被告了,但网友们却觉得一点也不亏!
- Castle 整合.NET Remoting
- 这三要素,让区块链技术成为颠覆世界的技术
- 代码实现 WordPress 反垃圾评论功能
- Flash/Flex学习笔记(39):弹性运动
- 兼容Mono的下一代云环境Web开发框架ASP.NET vNext
- ASP.NET vNext 概述
- 丰富排版页面——为你的wordpress主题添加短代码形式美化框
- 开放式管理基础结构 OMI
- 人类设计了游戏和AI 2017年AI在游戏中打败了人类
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- tomcat服务器如何配置字符集为utf-8彻底解决中文乱码的问题详解
- Linux下Android开发环境搭建的操作方法
- liunx 时间函数与时间格式与字符串之间的转化方法
- 详解linux下的.net/mvc/cms程序结构
- Azure给ubuntu虚拟机挂载数据盘的详细步骤
- 详解SSH 远程执行任务的方法
- Linux基础学习之文件查找find的常见用法
- Linux基础之xargs命令的入门实例
- CentOS 7.4下安装Oracle 11.2.0.4数据库的方法
- CentOS桌面环境中网卡启动失败的解决方法
- 浅谈Linux vfork与fork简单对比分析
- Linux定时任务Crontab的使用方法
- linux虚拟网络设备之vlan配置详解
- Centos7安装完后无法联网的解决方法
- Linux静态链接库与模板类的处理方式