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

一、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操作,快去试试吧!

相关推荐
quan263110 分钟前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js
GIS之路10 分钟前
GDAL 读取影像元数据
前端
qb1 小时前
vue3.5.18源码-编译-入口
前端·vue.js·架构
小桥风满袖1 小时前
极简三分钟ES6 - 类与继承
前端·javascript
虫无涯1 小时前
【分享】基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件
前端·vue.js·编辑器
子兮曰1 小时前
🚀99% 的前端把 reduce 用成了「高级 for 循环」—— 这 20 个骚操作让你一次看懂真正的「函数式折叠」
前端·javascript·typescript
wifi歪f1 小时前
📦 qiankun微前端接入实战
前端·javascript·面试
小桥风满袖1 小时前
极简三分钟ES6 - Symbol
前端·javascript
子兮曰1 小时前
🚀Map的20个神操作,90%的开发者浪费了它的潜力!最后的致命缺陷让你少熬3天夜!
前端·javascript·ecmascript 6
NewChapter °1 小时前
如何通过 Gitee API 上传文件到指定仓库
前端·vue.js·gitee·uni-app