前端必看 | 用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操作,快去试试吧!

相关推荐
musk12126 分钟前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
翻滚吧键盘35 分钟前
js代码09
开发语言·javascript·ecmascript
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景1 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼2 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿2 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再2 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref