用 EditInPlace 实现让金手指点点就能使B站个性签名编辑一键变身！

谎言西西里
373 阅读6分钟

引言

在我日常闲逛b站时，在翻到了我的个人资料页面，突然觉得那个已经用了好几年的个性签名有点儿腻了。在传统情况下，需要怎么做？点击“编辑”按钮，然后被带到一个全新的页面，填完新的个性签名后还得提交，最后再次刷新页面才能看到变化。这过程麻烦的就像去零食店买瓶冰镇小饮料还要先办张会员卡。

但是，通过 EditInPlace就地编辑 我们就能让网页上的文字瞬间变身，只需轻轻一点，原本不可触碰的文字立刻变成了输入框，等待着我们的金手指完成修改。修改后，再次点击保存或按下回车键，一切又恢复原样，仿佛什么都没有发生过，但事实上，一切都已焕然一新！

为什么我们需要EditInPlace？

要知道 EditInPlace（就地编辑）是一种非常实用的前端技术，它允许用户直接在页面上修改内容，而无需跳转到专门的编辑页面或提交复杂的表单等，可以给予用户及时的反馈，让用户更加直观的感受到自己进行的操作，并且可以有效简化流程（妈妈再也不用担心我输错了一次又要等待提交半天后才能修改），当然对于使用辅助技术（如屏幕阅读器）的用户而言，EditInPlace提供了更加友好的交互模式，因为他们不需要频繁地切换页面或处理复杂的导航结构。

实战为哔哩哔哩用户体验打造个性签名：（DOM VS form）

当我们在想如何开发时，有诸多选项，而这里我们就不得不提我们两个Web开发中非常重要的概念，DOM 和 form 了。

  • DOM：DOM 是一种编程接口，它将 HTML 和 XML 文档表示为树形结构，允许开发者使用编程语言（通常是JavaScript）动态地访问、修改文档内容、结构和样式，响应用户事件，并与服务器进行异步通信。
  • form：表单是 HTML 中的一种元素，通过各种输入控件收集用户数据，并通过 http 请求将数据提交给服务器进行处理，常用于登录、注册、搜索和数据提交等场景。

我们可以发现二者有着许多不同的用处，但是也有各自的优点，DOM常用于动态访问，比较契合 EditInPlace，而 form 更像我们的传统修改数据，这手心手背都是肉，该怎么抉择呢？小孩子才做选择，那大人当然是全都要了，那我们就分别来实现一下修改个性签名。

DOM 实现EditInPlace ：

第一步：编写页面结构

  • 创建一个<div id="app">，再在内部创建一个子<div id="ep1">作为我们的整体。
  • 由于我们要实现 EditInPlace，所以我们需要一个显示在页面上的文本，一个隐藏的输入框来编辑文本，并且创建两个隐藏的按钮处理在我们进行修改时的保存或取消编辑。
<div id="app">
    <div id="ep1">
        <span id="content">求求各位的点点手中的一键三连</span> // 显示文本
        <input type="text" id="input" value="求求各位的点点手中的一键三连"> // 编辑文本
        <input type="button" id="save" value="Save"> // 保存按钮
        <input type="button" id="cancel" value="Cancel"> // 取消编辑按钮
    </div>
</div>

这样我们就完成了页面的开发，接下来就是来编辑 JavaScript 脚本了。

第二步：编写 JavaScript 脚本

介绍一下DOM（文档对象模型）的作用，它将文档表示为节点树，而每个节点代表文档的一部分（如元素、属性或文本）。通过DOM，可以使用 JavaScript 来动态地操作 html 页面的内容、结构和样式。

让我们分析和拆分一下需求，我们要实现 EditInPlace，需要允许用户直接在页面上修改内容，再看我们的页面结构，需要干嘛？哎~

    1. 我们是不是要动态展现 按钮、文本、输入框 呀，所以我们可以通过操控style.display属性来进行展示/隐藏，设为none隐藏，inline显示，这样我们创建 文本状态 和 编辑状态 了。
    1. 接下来就是点击文本进入编辑状态了，我们只需要注意在输入框内保留最新的签名即可。
    1. 进入编辑状态后就是修改了，用新输入的替换原本的文本。
    1. 最后一步就是取消编辑状态了。

看到这里只能说心想这真是 EZ 呀，废话不多说直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EditInPlace 哔哩哔哩用户体验打造</title>
</head>
<body>
    <div id="app">
        <div id="ep1">
            <span id="content">求求各位的点点手中的一键三连</span>
            <input type="text" id="input" value="求求各位的点点手中的一键三连">
            <input type="button" id="save" value="Save">
            <input type="button" id="cancel" value="Cancel">
        </div>
    </div>
    <script>
    // 根据ID获取元素
        const content = document.getElementById('content');
        const input = document.getElementById('input');
        const save = document.getElementById('save');
        const cancel = document.getElementById('cancel');

        // 文本状态
        function convertToText() {
            input.style.display = 'none';
            save.style.display = 'none';
            cancel.style.display = 'none';
            content.style.display = 'inline';
        }

        // 编辑状态
        function convertToEdit() {
            input.style.display = 'inline';
            save.style.display = 'inline';
            cancel.style.display = 'inline';
            content.style.display = 'none';
        }
        convertToText();

        // 点击文本 进入编辑状态
        content.addEventListener('click', function() {
            convertToEdit();
            // 输入框里是最新的签名
            input.value = content.innerText;
        });

        // 点击保存按钮 保存编辑后的内容
        save.addEventListener('click', function() {
            content.innerText = input.value;
            convertToText();
        });

        // 点击取消按钮 取消编辑
        cancel.addEventListener('click', function() {
            convertToText();
        });
        </script>
</body>
</html>

这样就实现了功能，如图：

文本状态：

image.png

编辑状态：

image.png

form 实现传统修改数据：

让我们直接进入表单部分的开发：

    1. 定义一个表单，用action属性指定了表单数据提交的目标URL，而method属性指定了 http 请求方法（这里我们使用 post ）。
    1. 定义一个标签，与ID为input的输入框关联。当用户点击这个标签时，对应的输入框会获得焦点。
    1. 定义一个文本输入框。
    1. 定义一个提交按钮，用户点击该按钮时，表单数据将被发送到action指定的URL。

话不多说，上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="https://www.baidu.com" method="post">
        <div>
            <label for="input">签名</label>
            <input type="text"
                name="signature" 
                id="input"
                placeholder="请输入签名"
                required 
            >
        </div>
        <div>
            <input type="submit" value="提交">
        </div>
    </form>
</body>
</html>

image.png

需要注意一个小细节，由于设置了`required`属性，用户必须填写签名才能提交表单，这样的错误处理可以更好的通知用户遇到的问题。

image.png

变得更好：

我们发现，这样的点击修改文本其实在许多地方都会出现，难不成我们需要每次的原封不动的再敲一遍代码吗？生产队的驴都会累死。这里我们就可以通过将功能封装在一个构造函数EditInPlace中，并使用原型方法createElement，让代码变得更加模块化和可维护。这里我们就不过多赘述了，各位读者可以自行开发。献上代码，仅供参考。

JavaScript 部分：

// 文档注释！！！良好的编程习惯百看不厌
/**
 *  @func 就地编辑
 *  @params { id, parent 父节点, value 默认值 }
 *  @author xxl
 *  @date 2024-11-28
 */ 
function EditInPlace(id, parent, value) {
    this.id = id; // 使用this 可以跨函数共享属性
    this.parent = parent || document.body; // 如果parent没有值，默认挂在body（根节点）上
    this.value = value || '这个家伙很懒，什么都没有留下';
    this.createElement(this.id);
}
EditInPlace.prototype.createElement = function(id) {
    // console.log(id);
    // 相当于 <div id="ep1"></div>
    this.containerElement = document.createElement('div');
    this.containerElement.id = this.id;
    this.parent.appendChild(this.containerElement);

    this.staticElement = document.createElement('span');
    this.containerElement.appendChild(this.staticElement);
}

html 部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面向对象的editInPlace</title>
</head>
<body>
    <div id="app">
    </div>
    <script src="./editInPlace.js"></script>
    <script>
    // 流程代码，走向面向对象的封装
    new EditInPlace(
        'ep1',
        document.getElementById('app')
    );
    new EditInPlace(
        'ep2',
        document.getElementById('app'),
        '好嗨哟'
    );
    </script>
</body>
</html>

总结：

总之，EditInPlace 就地编辑技术让我们的网页变得更加生动有趣，用户操作更加直观便捷。无论是修改个性签名还是其他内容，都可以说“EZ”。下次当你在B站上闲逛时，不妨自己试试这个小技巧，让你的个性签名瞬间焕然一新，享受那种“啪”的一声，一切搞定的快感！

avatar
文章
阅读
粉丝