废话少说，见官方文档：

　　　　　　

他的用法是：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显示文本框后自动获取焦点的更多相关文章

  1. pyqt5:标签显示文本框内容

    文本框(lineEdit)输入文本,标签(label)就会显示文本框的内容. 原理如下: 输入文本时,lineEdit控件发射信号textChanged(),label收到后触发setText()槽. ...

  2. SAP四代增强实现：销售订单复制项目文本时不需要显示文本框和回车

    最近接收到一个业务需求,在SAP依据销售订单复制时,如果订单里面的项目有多个文本,系统就会显示复制的文本框处理,让用户选择是否复制,这个就让销售很不舒服,如果有几十个项目,每个项目有几个文本,那就就要 ...

  3. javascript当文本框获得焦点设置边框

    javascript当文本框获得焦点设置边框:本章节介绍一下当文本框获得焦点以后如何设置文本框的边框样式,本来是一个非常简单的问题,但是有可能前台美工人员对javascript并不是太了解,所以还是通 ...

  4. 【JS】【3】标签显示几秒后自动隐藏

    $("#XXX").show().delay(2000).hide(0); 2000,0:可选,速度,(毫秒:"slow":"fast") ...

  5. IOS中文本框输入自动隐藏和自动显示

    uilabe和UIText扩展方法 +(UILabel*)LabWithFrame:(CGRect)_rect text:(NSString*)aText textColor:(UIColor*)aC ...

  6. 使用 jquery-autocomplete插件 完成文本框输入自动填充联想效果 解决兼容IE输入中文问题

    项目中有时会用到ajax自动补全查询,就像Google的搜索框中那样,输入汉字或者字母的首个字母,则包含这个汉字或者字母的相关条目会显示出来供用户选择,该插件就是实现这样的功能的.autocomple ...

  7. javaScript:让文本框内的最后一个文字的后面获得焦点

    //当失去交点以后 让文本框内的文字获得焦点 并且光标移到最后一个字后面 function myfocus(myid) { if(isNav){ document.getElementById(myi ...

  8. JavaScript 自定义文本框光标——初级版

    文本框(input或textarea)的光标无法修改样式(除了通过color修改光标颜色).但笔者希望个人创建自己的网站时,文本框的光标有属于自己的风格.所以,尝试模拟文本框的光标,设计有自己风格的光 ...

  9. Vue - 实现双击显示编辑框；自动聚焦点击的显示框；点击编辑框外的地方，隐藏编辑框

    实现这三个功能的踩坑记录. 1. 需求 在Vue中,有一个input, 双击时编辑文本,点击该input节点外的其他地方,则取消编辑. 那么这里有三个要实现的地方 第一是双击显示编辑框. 第二是自动聚 ...

随机推荐

  1. 使用LayoutInflater添加一个布局引用

    LayoutInflater 与 xml 的<include/>的区别,至今没搞清楚,下面记录一下LayoutInflater引用一个布局并立即显示呈现的方法: private void ...

  2. centos 安装sbt

    1.yum install sbt 2.如果不行,则 curl https://bintray.com/sbt/rpm/rpm > bintray-sbt-rpm.repo sudo mv bi ...

  3. C# winform自动更新 （附 demo下载）

    随着需求的变化,如果Server每次更新出新的内容,Client都要重新安装的话. 太过于复杂化.  所以自动更新是很有必要的. 一..NET自带的更新方式    以服务器端为主  (自动更新,微软爸 ...

  4. JQuery官方学习资料（译）：遍历

        一旦你通过JQuery创建了选择器,你就可以对此进行更为深入的遍历.遍历可以分为三个基本组成部分,父节点.子节点和兄弟节点.JQuery为这些部分提供了许多丰富易用的方法. <div c ...

  5. T-SQL基础（二）之关联查询

    在上篇博文中介绍了T-SQL查询的基础知识,本篇主要介绍稍微复杂的查询形式. 表运算符 表运算符的作用是把为其提供的表作为输入,经过逻辑查询处理,返回一个表结果.SQL Server支持四个表运算符: ...

  6. mysql left join的深入探讨

    即使你认为自己已对 MySQL 的 LEFT JOIN 理解深刻,但我敢打赌,这篇文章肯定大致也许可能让你学会点东西! ON 子句与 WHERE 子句的不同 一种更好地理解带有 WHERE ... I ...

  7. nginx配置反向代理和负载均衡

    一.反向代理 说明:应该有一个nginx服务器有多个应用服务器(可以是tomcat),本文使用一台虚拟机,安装一个nginx,多个tomcat,来模拟 upstream tomcats{ server ...

  8. 修改CentOS服务器时间为北京时间

    购买了VPS,CentOS系统,发现服务器时间与北京时间往往不一致,存在时差. [clive@server workspace]$ date 2018年 05月 30日 星期三 02:02:47 UT ...

  9. phpstorm连接服务器，实时编辑上传文件到服务器

    教程一:我的老版本,并且是汉化的,找到该位置 打开后:点击Configuration进行配置! 输入服务器的ip.端口.用户名.密码即可 打开编辑: 教程二:下面更新了一个新版本的(2018.2): ...

  10. Python入门基础之迭代和列表生成式

    什么是迭代 在Python中,如果给定一个list或tuple,我们可以通过for循环来遍历这个list或tuple,这种遍历我们成为迭代(Iteration). 在Python中,迭代是通过 for ...