预览

为什么要就地编辑功能？

在B站个人主页里，编辑个性签名，在鼠标没有处于范围里时，处于文本状态

鼠标移到范围内时，就会处于编辑状态。

这体现了就地编辑功能的特点：提升Web交互体验、实现概览

实现就地编辑

下面直接上代码

HTML结构

<div id="signature"></div>
<script src="./edit_in_place.js"></script>
<script>
    const STORAGEKEY = 'signature';
    const signature = localStorage.getItem(STORAGEKEY) || "这个家伙很懒，什么都没有留下";
    new EditInPlace(STORAGEKEY, document.getElementById('signature'), signature);
</script>

1function EditInPlace(storageKey, container, value = '这个家伙很懒，什么都没有留下') {
    this.storageKey = storageKey;
    this.container = container;
    this.value = value;
    this.createElement();
    this.attachEvents();
}

初始化: EditInPlace构造函数接收存储键名、容器元素和签名默认值作为参数，然后调用了createElement和attachEvents方法来创建和绑定事件。

2. 创建编辑元素

createElement: function() {
    // ...创建div、span、input等元素的代码
}

创建DOM结构: 在这个方法中，动态生成了包含静态文本展示、输入框、保存和取消按钮的DOM结构，并将其添加到指定的容器中。

3. 切换显示状态

converToText: function() { /* 隐藏编辑元素，显示文本 */ }
converToEdit: function() { /* 显示编辑元素，隐藏文本 */ }

状态转换: 提供了两个方法用于在文本显示状态和编辑状态之间切换，通过修改DOM元素的display属性实现。

4. 事件绑定

1attachEvents: function() {
    // 使用箭头函数保持this上下文
    this.staticElement.addEventListener('mousemove', () => this.converToEdit());
    this.saveButton.addEventListener('click', () => this.save());
    this.cancleButton.addEventListener('click', () => this.converToText());
}

事件处理: 绑定了鼠标悬浮、保存和取消按钮的点击事件，利用箭头函数维持了正确的this上下文。

5. 保存数据


save: function() {
    this.value = this.fieldElement.value;
    this.staticElement.innerHTML = this.value;
    this.converToText();
    localStorage.setItem(this.storageKey, this.value);
}