可编辑元素


可编辑元素

1
2
3
4
<!-- vue -->
<p class="content" v-text="item.title" @keydown="onEnter"  @dblclick="turnOnEditable" @blur="(e)=>{titleBlur(e, index)}">
  {{item.title}}
</p>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// js
methods: {
    // 修改标题,回车时失去焦点
    onEnter(e) {
        if(e.keyCode===13){
            e.target.blur();
        } 
    },
    // 失去焦点时,保存内容,并将元素修改为不可编辑
    titleBlur(e, index){
        const title = e.target.innerText;
        this.onTitleChange({title:title,index:index});
        e.target.setAttribute('contenteditable', false);
    },
    // 双击元素时,将其变为可编辑状态,并获取焦点。
    turnOnEditable(e){
        e.target.setAttribute('contenteditable', true)
        e.target.focus();
        var range = window.getSelection();//创建range
        range.selectAllChildren(e.target);//range 选择obj下所有子内容
        range.collapseToEnd(); // 光标放到最后
    },
}

html部分是基于vue的,不过也很容易用其他方式实现。这里实现的是双击元素后,将其变为可编辑模式,就是设置contenteditable属性,这个属性直接写在标签中也是可以的。 失去焦点时,将contenteditable属性置为false。 回车时,失去焦点,会触发blur事件。其中还有个操作光标的事件,因为可能出现focus后,光标在开始位置的问题。

MDN介绍Content_Editable

updatedupdated2020-10-122020-10-12