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

相关推荐
爷_3 小时前
字节跳动震撼开源Coze平台!手把手教你本地搭建AI智能体开发环境
前端·人工智能·后端
charlee444 小时前
行业思考:不是前端不行,是只会前端不行
前端·ai
Amodoro5 小时前
nuxt更改页面渲染的html,去除自定义属性、
前端·html·nuxt3·nuxt2·nuxtjs
Wcowin5 小时前
Mkdocs相关插件推荐(原创+合作)
前端·mkdocs
伍哥的传说6 小时前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
lichenyang4536 小时前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript
Trust yourself2436 小时前
想把一个easyui的表格<th>改成下拉怎么做
前端·深度学习·easyui
三口吃掉你6 小时前
Web服务器(Tomcat、项目部署)
服务器·前端·tomcat
Trust yourself2436 小时前
在easyui中如何设置自带的弹窗,有输入框
前端·javascript·easyui
烛阴6 小时前
Tile Pattern
前端·webgl