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

相关推荐
卷Java19 分钟前
CSS模板语法修复总结
java·前端·css·数据库·微信小程序·uni-app·springboot
北城以北888823 分钟前
JavaScript--基础ES(一)
开发语言·javascript·intellij-idea
gihigo19981 小时前
在CentOS上配置SVN至Web目录的自动同步
前端·svn·centos
珍宝商店1 小时前
优雅的 async/await 错误处理模式指南
开发语言·前端·javascript
excel1 小时前
楖览:Vue3 源码研究导读
前端
proud12121 小时前
开源的 CSS 动画库
前端·css·开源
折翼的恶魔1 小时前
HTML媒体标签
前端·html
excel2 小时前
前端项目中的测试分类与实践 —— 以 Vue 项目为例
前端
宋辰月2 小时前
echarts项目积累
前端·javascript·echarts
du青松2 小时前
onlyoffice 服务搭建及配置 - 前端 office 文件预览解决方案
前端