JavaScript中HTML DOM focus()与onblur() setSelectionRange()用法

Posted Wualin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript中HTML DOM focus()与onblur() setSelectionRange()用法相关的知识,希望对你有一定的参考价值。

今天在写一个todolist待办事项项目,需要单击编辑待办事项的内容,百度搜了一下这几个方法的用法,总结一下

focus()方法:获得键盘焦点,单击之后就调用绑定的js方法,在span标签里面加一个输入框,然后进行编辑

onblur()方法:失去键盘焦点,编辑结束之后,随意鼠标单击任意地方更新编辑的内容

setSelectionRange():js控制输入框光标位置

这三个方法组合起来可以用做鼠标点击事件,然后进行内容编辑,内容编辑时使用setSelectionRange()选中所有文本,就可以不需要一个一个删除了

<body>
    <span id="s1" onclick="alter()">这是一段文本</span>
    <script>
        function alter() {
            var span = document.getElementById(‘s1‘);
            var conent = span.innerhtml;
            span.innerHTML = "<input id=‘input‘ value=‘"+conent+"‘/>";
            var input = document.getElementById(‘input‘);
            input.setSelectionRange(0,input.value.length);
            input.focus();//获得键盘焦点
            input.onblur = function () {//失去键盘焦点
                span.innerHTML = input.value;//更改span的文本内容
            }
        }
    </script>
</body>

以上是关于JavaScript中HTML DOM focus()与onblur() setSelectionRange()用法的主要内容,如果未能解决你的问题,请参考以下文章

[HTML5] Focus management using CSS, HTML, and JavaScript

JQuery基础

Javascript,focus()函数不能使输入框获得焦点

vue指令用法

vue指令用法

javascript表单编程