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("复制成功!");
};

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