前端必看 | 零基础 | 用EditInPlace实现B站个性签名设计

天天扭码
381 阅读4分钟

一、B站个性签名设计展示

下面是B站的个性签名设计效果，可以发现这个设计摒弃了传统的表单设计，点击可以在文本上编辑，再次点击可以保存个性签名，这样的设计使得页面简约而不简单！

video.gif

本文将带领大家探索该设计的奥秘，实现我们前端设计的美学成分

二、何为EditInPlace？为何EditInPlace？

在传统的前端开发中，当用户需要修改数据时，通常会采用表单提交的方式。以修改个性签名为例，用户可能需要点击一个编辑按钮，跳转到专门的编辑页面，填写新的签名内容，然后提交表单，最后页面刷新显示新的签名。这种方式不仅操作步骤繁琐，而且刷新页面会打断用户的操作流程，尤其是在一些对实时性要求较高的场景下，显得不够高效。

Edit In Place（就地编辑）是一种用户界面（UI）设计模式，允许用户直接在页面上的某个元素（如文本、列表项、图片等）进行编辑，而无需跳转到另一个页面或弹出窗口。这种交互方式能提供更流畅、直观的用户体验，减少操作步骤。

三、简单的DOM操作即可实现EditInPlace

下面的代码即可实现EditInPlace

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EditInPlace bilibili用户体验打造</title>
</head>
<body>
    <div id="app">
        <div id="ep1">
            <span id="content">男德学院一等奖学金获得者</span>
            <input type="text" id="input" value="男德学院一等奖学金获得者">
        </div>
    </div>
    <script>
        // DOM js操作HTML对象
        const content = document.getElementById('content');
        const input = document.getElementById('input');


        function convertToText() {
            content.style.display = 'inline';
            input.style.display = 'none';
        }
        function convertToEdit() {
            content.style.display = 'none';
            input.style.display = 'inline';
        }
        convertToText();
        content.addEventListener('click', function(){
            convertToEdit();
            input.value=content.innerText;
        });
        input.addEventListener('mouseout', function(){
            convertToText();
            content.innerText=input.value;
        });
    </script>
</body>
</html>

video (1).gif

在这段代码中，我们点击文本处可以实现文本的编辑，鼠标移开会自动保存我们编辑后的效果，这得益于我们的样式展示和DOM操作

在样式展示方面，使用“inline”和“none”控制文本和修改框的显示和隐藏

在DOM操作方面，使用“click”和“mouseout”事件去控制display样式是“inline”还是“none”

四、详细解释(能看懂代码可跳过)

EditInPlace 前端用户展示

个性签名功能

显示功能

在页面上，用户的个性签名以文本形式直接显示，给用户一种简洁直观的感觉。例如，在我们的代码示例中，使用 <span> 元素来显示个性签名：

html

<span id="content">男德学院一等奖学金获得者</span>

这样，用户可以一目了然地看到自己的个性签名。

编辑功能

当用户有修改个性签名的需求时，只需点击显示的签名文本，页面就会切换到编辑状态。此时，一个输入框会显示出来，用户可以在输入框中自由修改签名内容。编辑完成后，当鼠标移出输入框，页面会自动切换回显示状态，并更新显示的签名内容。这种无缝的切换方式，大大提升了用户的编辑体验。

DOM 编程实现 EditInPlace

呈现文本和编辑状态

在 DOM 编程中，我们可以通过控制元素的 display 属性来实现文本和编辑状态的切换。当处于显示状态时，让输入框隐藏；当处于编辑状态时，让显示文本的元素隐藏。以下是实现这一功能的 JavaScript 代码：

javascript

// 获取显示文本和输入框元素
const content = document.getElementById('content');
const input = document.getElementById('input');

// 切换到文本显示状态
function convertToText() {
    content.style.display = 'inline';
    input.style.display = 'none';
}

// 切换到编辑状态
function convertToEdit() {
    content.style.display = 'none';
    input.style.display = 'inline';
}

基于 DOM 节点对象的操作

为了实现状态的切换，我们需要对 DOM 节点对象进行查找和操作。在上述代码中，我们使用 document.getElementById() 方法来查找显示文本和输入框的元素。然后，通过为这些元素添加事件监听器，实现状态的切换。

javascript

// 初始化页面，默认显示文本
convertToText();

// 点击显示文本时，切换到编辑状态
content.addEventListener('click', function () {
    convertToEdit();
    input.value = content.innerText;
});

// 鼠标移出输入框时，切换到文本显示状态
input.addEventListener('mouseout', function () {
    convertToText();
    content.innerText = input.value;
});

五、总结

EditInPlace 就地编辑功能通过简洁高效的方式，为用户提供了更好的编辑体验，同时也让我们在 DOM 编程方面得到了锻炼和提升。在实际项目中，我们可以根据需求对代码进行扩展，例如添加更多的交互效果、验证输入内容等。希望本文能对你在前端开发中实现就地编辑功能有所帮助。

avatar
文章
阅读
粉丝