JavaScript文本框自动获取焦点及点击实现Ctrl+c的功能函数
时间:2018-11-07
本文章向大家介绍JavaScript文本框自动获取焦点及点击实现Ctrl+c的功能函数,需要的朋友可以参考一下
废话少说,见官方文档:
他的用法是:document.getElementById('username').focus(); 这样写在display:block;显示之后就可以自动激活input输入框啦!
这并不是最有意思的地方,最有意思的地方是他可以触发该元素的 相应 事件;
接下来来举个栗子:
<body> <input type="text" id="name"/> <button id="btn">点击获取焦点</button> </body> <script type="text/javascript"> document.getElementById('btn').onclick = function(){ document.getElementById('name').focus(); }; document.getElementById('name').onfocus = function(){ alert(1); }; </script>
当然这个有趣的地方显得卵用不是很大,希望这个细节能给你解决问题的方法
另外一个就是select()方法:该方法是选中该区域的内容,在点击按钮进行复制文本的时候常用到
既然说到点击选中复制,附送一份点击实现Ctrl+c的功能函数
function copyXq(id){ //选中文字 document.getElementById(id).select(); //创建range对象,代表页面上一段连续的区域 const range = document.createRange(); //selectNode : 选择整个节点,包括子节点 //selectNodeContents:选择节点的子节点 range.selectNode(document.getElementById('name')); //window.getSelection()方法获取鼠标划取部分的起始位置和结束位置 const selection = window.getSelection(); //rangeCount方法返回选区(selection)中range对象数量的只读属性 if(selection.rangeCount > 0) selection.removeAllRanges(); //老子翻译不出来了,这B怎么有那么多方法 selection.addRange(range); document.execCommand('copy'); alert("复制成功!"); };
该随笔主要是因为,萌新在刚开始走前端的时候一些细节会难以处理,所以记下的该笔记,那么,前路昭然,你我共进。
- Java中Arraylist与linkedlist的区别
- 手把手教你撸一个 Webpack Loader
- HashMap与HashTable区别
- iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 记录日志
- React Native 网络层分析
- 如何实现VM框架中的数据绑定
- Java盲点解析
- iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 解析JSON
- iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 处理静态资源
- iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 视图Nunjucks
- iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 代码分层
- iKcamp|基于Koa2搭建Node.js实战(含视频)☞ HTTP请求
- ubuntu中安装tomcat
- python文件操作
- 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 数组属性和方法
- 聊聊claudb的list command
- nginx add_header 仅部分或一次生效的原因与解决办法
- 聊聊claudb的keys command
- 聊聊claudb的server command
- 聊聊claudb的Database
- 聊聊claudb的SlaveReplication
- flutter doctor 卡死
- Angular如何自定义attribute指令
- 聊聊claudb的MasterReplication
- k8s 之yaml文件基本格式
- 你可能不知道的pandas的5个基本技巧
- Node 脚本遭遇异常时如何安全退出
- flutter Running Gradle task 'assembleDebug'
- 如何使用 docker 高效部署 Node 应用
- fish-redux框架路由配置报错问题