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

天天扭码2025-04-15 17:31

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

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

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

二、何为EditInPlace？

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

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

下面的代码即可实现EditInPlace

xml 复制代码

<!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>

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

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

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

通过以上操作我们就可以实现简单的EditInPlace操作，快去试试吧！