JavaScript中HTML DOM focus,与onblur

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

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

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

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

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

<body>
    <span >这是一段文本</span>
    <script>
        function change() {
            var span = document.getElementById('s1');
            var conent = span.innerHTML;
            span.innerHTML = "<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>