⚡什么是就地编辑？

就地编辑(Edit In Place)这个功能能让用户在不需要切换界面的情况下直接对页面上的内容进行编辑，很大程度上提升了用户体验。当鼠标的光标停在需要编辑改动的地方上时，文本会变成显示状态，点击需要编辑改动的地方时，文本会从文本显示状态转变为编辑状态，而当鼠标的光标从文本上离开或者完成编辑时，文本会从编辑状态转变为文本状态。

这是点击编辑栏时的样子：

这是光标悬停在编辑栏上面时的样子：

这是点击别处进行保存的样子： 那我们如何实现这一功能呢？

⚡localStorage

首先让我们先来了解一下localStorage，它是html5的一个本地储存机制，只要用户不主动清除，即使用户关闭浏览器，储存在localStorage中的数据也会一直存在。

⚡实现步骤

1.定义 EditInPlace() 类

// es6 默认值
function EditInPlace(storageKey, container, value = '这个家伙很懒，什么都没有留下'){
    // console.log('-----');
    this.storageKey = storageKey;
    this.container = container;
    this.value = value;
    // 将动态创建文本和编辑input的dom封装，代码的管理好
    this.createElement();
    // console.log(this.value);
    this.attachEvents();

函数 EditInPlace() 接收container，value和storageKey这三个参数，并调用createElement()和attachEvents()这两个方法。

2.定义createElement() 和attachEvents() 这两个方法

EditInPlace.prototype = {
    // 就地编辑需要的动态DOM
    createElement: function(){
        // DOM树
        // 创建一个div
        this.editElement = document.createElement('div');
        // 添加一个子元素
        this.container.appendChild(this.editElement)

        // signature 文本值
        this.staticElement = document.createElement('span')
        this.staticElement.innerHTML = this.value
        this.editElement.appendChild(this.staticElement)

        // input
        this.fieldElement =  document.createElement('input');
        this.fieldElement.type = 'text'
        this.fieldElement.value = this.value
        this.editElement.appendChild(this.fieldElement)
        
        // 保存按钮
        this.saveButton = document.createElement('input')
        this.saveButton.type = 'button'
        this.saveButton.value = '保存'
        this.editElement.appendChild(this.saveButton)

        // 取消按钮
        this.cancelButton = document.createElement('input')
        this.cancelButton.type = 'button'
        this.cancelButton.value = '取消'
        this.editElement.appendChild(this.cancelButton)

        // 初始文本状态
        this.converToText()
    },
    // 文本状态
    converToText:function(){
        
    },
    // 编辑状态
    converToEdit:function(){
    
    },
    // 事件监听
    attachEvents:function(){
        // this 
        this.staticElement.addEventListener('click',() =>{
            this.converToEdit()           
        })
        this.saveButton.addEventListener('click',() =>{
            this.save()
        })
        this.cancelButton.addEventListener('click',() =>{
            this.converToText()
        })
    },

将createElement() 和attachEvents() 定义在EditInPlace的原型上实现实例共享。

在createElement() 中创建DOM结构，添加到相对应的container中，从而实现文本显示，输入，保存，取消的功能。

用事件监听addEventListener将保存，编辑状态，文本状态分别绑定，点击不同地方时触发。

3. 功能实现

converToText：文本显示状态，显示透明输入框。

converToEdit：文本编辑状态，显示输入框。

 // 文本状态
    converToText:function(){
        this.staticElement.style.display = 'inline'
        this.fieldElement.style.display = 'none'
        this.saveButton.style.display = 'none'
        this.cancelButton.style.display = 'none'
    },
    // 编辑状态
    converToEdit:function(){
        this.staticElement.style.display = 'none'
        this.fieldElement.style.display = 'inline'
        this.saveButton.style.display = 'inline'
        this.cancelButton.style.display = 'inline'
    }

保存功能：

save:function(){
        this.value = this.fieldElement.value
        this.staticElement.innerHTML = this.value
        this.converToText();
        // html5 localStorage 本地存储
        localStorage.setItem(this.storageKey,this.value)
        this.saveData()
    },

完整JS代码实现：

// 一个文件一个类
/**
 * @func  就地编辑
 * @param {ele} container   挂载点
 * @author Ro9nin
 * @date 2024/6/25
 */

// es6  2015 更加简洁优雅 好读

// es6 默认值
function EditInPlace(storageKey, container, value = '这个家伙很懒，什么都没有留下'){
    // console.log('-----');
    this.storageKey = storageKey;
    this.container = container;
    this.value = value;
    // 将动态创建文本和编辑input的dom封装，代码的管理好
    this.createElement();
    // console.log(this.value);
    this.attachEvents();
} 

EditInPlace.prototype = {
    // 就地编辑需要的动态DOM
    createElement: function(){
        // DOM树
        // 创建一个div
        this.editElement = document.createElement('div');
        // 添加一个子元素
        this.container.appendChild(this.editElement)

        // signature 文本值
        this.staticElement = document.createElement('span')
        this.staticElement.innerHTML = this.value
        this.editElement.appendChild(this.staticElement)

        // input
        this.fieldElement =  document.createElement('input');
        this.fieldElement.type = 'text'
        this.fieldElement.value = this.value
        this.editElement.appendChild(this.fieldElement)
        
        // 确定按钮
        this.saveButton = document.createElement('input')
        this.saveButton.type = 'button'
        this.saveButton.value = '保存'
        this.editElement.appendChild(this.saveButton)

        // 取消按钮
        this.cancelButton = document.createElement('input')
        this.cancelButton.type = 'button'
        this.cancelButton.value = '取消'
        this.editElement.appendChild(this.cancelButton)

        // 初始文本状态
        this.converToText()
    },
    // 文本状态
    converToText:function(){
        this.staticElement.style.display = 'inline'
        this.fieldElement.style.display = 'none'
        this.saveButton.style.display = 'none'
        this.cancelButton.style.display = 'none'
    },
    // 编辑状态
    converToEdit:function(){
        this.staticElement.style.display = 'none'
        this.fieldElement.style.display = 'inline'
        this.saveButton.style.display = 'inline'
        this.cancelButton.style.display = 'inline'
    },
    // 事件监听
    attachEvents:function(){
        // this 
        this.staticElement.addEventListener('click',() =>{
            this.converToEdit()           
        })
        this.saveButton.addEventListener('click',() =>{
            this.save()
        })
        this.cancelButton.addEventListener('click',() =>{
            this.converToText()
        })
    },
    save:function(){
        this.value = this.fieldElement.value
        this.staticElement.innerHTML = this.value
        this.converToText();
        // html5 localStorage 本地存储
        localStorage.setItem(this.storageKey,this.value)
        this.saveData()
    }  
}

接下来让我们一起打开这个界面康康：

接下来编辑自己想输入的文字并保存：

如图可见，保存成功了，这样就实现了就地编辑。

恭喜你，距离B站又近了一步😁

希望这篇文章可以帮助你理解学习就地编辑