JavaScript显示文本框后自动获取焦点
废话少说,见官方文档:
他的用法是: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(id)); //window.getSelection()方法获取鼠标划取部分的起始位置和结束位置 const selection = window.getSelection(); //rangeCount方法返回选区(selection)中range对象数量的只读属性 if(selection.rangeCount > 0) selection.removeAllRanges(); //老子翻译不出来了,这B怎么有那么多方法 selection.addRange(range); document.execCommand('copy'); alert("复制成功!"); };
该随笔主要是因为,萌新在刚开始走前端的时候一些细节会难以处理,所以记下的该笔记,那么,前路昭然,你我共进。
JavaScript显示文本框后自动获取焦点的更多相关文章
- pyqt5:标签显示文本框内容
文本框(lineEdit)输入文本,标签(label)就会显示文本框的内容. 原理如下: 输入文本时,lineEdit控件发射信号textChanged(),label收到后触发setText()槽. ...
- SAP四代增强实现:销售订单复制项目文本时不需要显示文本框和回车
最近接收到一个业务需求,在SAP依据销售订单复制时,如果订单里面的项目有多个文本,系统就会显示复制的文本框处理,让用户选择是否复制,这个就让销售很不舒服,如果有几十个项目,每个项目有几个文本,那就就要 ...
- javascript当文本框获得焦点设置边框
javascript当文本框获得焦点设置边框:本章节介绍一下当文本框获得焦点以后如何设置文本框的边框样式,本来是一个非常简单的问题,但是有可能前台美工人员对javascript并不是太了解,所以还是通 ...
- 【JS】【3】标签显示几秒后自动隐藏
$("#XXX").show().delay(2000).hide(0); 2000,0:可选,速度,(毫秒:"slow":"fast") ...
- IOS中文本框输入自动隐藏和自动显示
uilabe和UIText扩展方法 +(UILabel*)LabWithFrame:(CGRect)_rect text:(NSString*)aText textColor:(UIColor*)aC ...
- 使用 jquery-autocomplete插件 完成文本框输入自动填充联想效果 解决兼容IE输入中文问题
项目中有时会用到ajax自动补全查询,就像Google的搜索框中那样,输入汉字或者字母的首个字母,则包含这个汉字或者字母的相关条目会显示出来供用户选择,该插件就是实现这样的功能的.autocomple ...
- javaScript:让文本框内的最后一个文字的后面获得焦点
//当失去交点以后 让文本框内的文字获得焦点 并且光标移到最后一个字后面 function myfocus(myid) { if(isNav){ document.getElementById(myi ...
- JavaScript 自定义文本框光标——初级版
文本框(input或textarea)的光标无法修改样式(除了通过color修改光标颜色).但笔者希望个人创建自己的网站时,文本框的光标有属于自己的风格.所以,尝试模拟文本框的光标,设计有自己风格的光 ...
- Vue - 实现双击显示编辑框;自动聚焦点击的显示框;点击编辑框外的地方,隐藏编辑框
实现这三个功能的踩坑记录. 1. 需求 在Vue中,有一个input, 双击时编辑文本,点击该input节点外的其他地方,则取消编辑. 那么这里有三个要实现的地方 第一是双击显示编辑框. 第二是自动聚 ...
随机推荐
- .net core Identity集成IdentityServer(3) 一键登出
在客户端程序, 我们补充一键登出操作. 使用了idsv之后, 退出的操作需要删除本地cookie, 然后去请求认证服务器, 也删除认证服务器的cookie. 官网给的退出的代码 public asyn ...
- ORACLE 配置连接远程数据库
ORACLE配置tnsnames.ora文件实例 客户机为了和服务器连接,必须先和服务器上的监听进程联络.ORACLE通过tnsnames.ora文件中的连接描述符来说明连接信息.一般tnsnames ...
- c# partial 关键字的使用
C# 2.0 引入了局部类型的概念.局部类型允许我们将一个类.结构或接口分成几个部分,分别实现在几个不同的.cs文件中. 局部类型适用于以下情况: (1) 类型特别大,不宜放在一个文件中实现.(2) ...
- [Linux] PHP-FPM开启慢日志记录
fpm:FastCGI Process Manager 是一种替代的PHP FastCGI实现,对于负载较重的站点非常有用. .先进的进程控制,优雅的停止启动 .能够使用不同的uid/gid/chro ...
- 2018-08-22 为中文API的简繁转换库添加迟到的持续集成
前两天在V2EX偶遇反馈帖第一次见以汉字命名的 Java 类 - V2EX, 于是复习了一下半年多没碰的项目program-in-chinese/zhconverter. 前文介绍了发布过程: 在Ma ...
- T研究:国内云BPM市场规模尚小,预计2018年仅为3.29亿元
文章摘要:T研究发现,目前国内云BPM市场规模不高,预计今年为3.29亿元,不过其增速稳定,未来发展仍可期. BPM?什么鬼?反正作为“菊外人”的小编是第一次听说. 其实,对于这个词,不光是小编,国内 ...
- 14.Odoo产品分析 (二) – 商业板块(7) –制造(1)
查看Odoo产品分析系列--目录 一旦你收到了库存中所需的原材料,就可以开始生产终端产品了.ERP系统的部分功能是帮助您根据可用资源调度这些订单.其中一项资源是原产品.其他资源可以包括可用劳动力或特定 ...
- Java之static作用的全方位总结
1.深度总结 引用一位网友的话,说的非常好,如果别人问你static的作用:如果你说静态修饰 类的属性 和 类的方法 别人认为你是合格的:如果是说 可以构成 静态代码块,那别人认为你还可以: 如果你说 ...
- Android EditText手机号格式化输入XXX-XXXX-XXXX
先来效果图: 设置手机格式化操作只需要设置EditText的addTextChangedListener的监听,下面看代码 /*editText输入监听*/ et_activity_up_login_ ...
- Android为TV端助力 fragment 的用法以及与activity的交互和保存数据的方法,包括屏幕切换(转载)!
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37992017 1.管理Fragment回退栈 类似与Android系统为Acti ...