欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JavaScript显示文本框后自动获取焦点

程序员文章站 2023-11-07 19:31:16
废话少说，见官方文档： 他的用法是：document.getElementById('username').focus(); 这样写在display:block;显示之后就可以自动激活input输入框啦！ 这并不是最有意思的地方，最有意思的地方是他可以触发该元素的 相应 事件； 接下来来举个栗子： ......

废话少说，见官方文档：

　　　　　　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('name'));
    //window.getselection()方法获取鼠标划取部分的起始位置和结束位置
    const selection = window.getselection();
    //rangecount方法返回选区(selection)中range对象数量的只读属性
    if(selection.rangecount > 0) selection.removeallranges();
    //老子翻译不出来了，这b怎么有那么多方法
    selection.addrange(range);
    document.execcommand('copy');
    alert("复制成功！");
};

 

该随笔主要是因为，萌新在刚开始走前端的时候一些细节会难以处理，所以记下的该笔记，那么，前路昭然，你我共进。

上一篇： PS中标尺工具在哪里？标尺快捷键是什么？

下一篇： 榴莲蛋怎么做呢

推荐阅读