当前位置：首页 > article >正文

EditInPlace就地编辑：Dom vs Form

article 2024/12/3 4:41:33

利用Dom和Form实现就地编辑（EditInPlace）功能，两者在实现方式、用户体验和适用场景上有一些区别。下面我将详细解释这些区别：

1. EditInPlace

就地编辑（EditInPlace）是一种用户界面设计模式，允许用户直接在页面上修改内容，而无需跳转到单独的编辑页面或打开新的窗口。举个bilibili的栗子

在这里插入图片描述

2. Dom实现

优点：

简洁性：直接操作DOM元素，代码相对简单，易于理解和维护。
性能：不需要额外的表单元素，减少了页面上的元素数量，可能提高渲染性能。
灵活性：可以更灵活地控制样式和行为，例如通过CSS和JavaScript来定制输入框的外观和交互。
响应速度：用户点击后立即进入编辑模式，响应速度快。

缺点：

复杂性：需要手动处理更多的事件和状态管理，如失去焦点时保存内容、键盘事件等。
可访问性：对于屏幕阅读器和其他辅助技术的支持可能不如表单元素好。
跨浏览器兼容性：不同浏览器对DOM操作的支持可能存在差异，需要进行额外的兼容性测试。

适用场景：

简单的文本编辑。
需要高度定制化的UI和交互。
对性能有较高要求的情况。

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EditInPlace</title>
</head>
<body>
    <div id="app">
        <div id="ep1">
            <span id = 'content'>这个家伙很懒，什么都没有留下</span>
            <input type="text" id="input" value="这个家伙很懒，什么都没有留下">
            <input type="button" id="save" value="save">
            <input type="button" id='cancel' value="cancel">
        </div>
    </div>
    <script>
        // DOM js html 节点对象 动态操作html
        const content = document.getElementById('content')
        const input = document.getElementById('input')
        const save = document.getElementById('save')
        const cancel = document.getElementById('cancel')
        
        // 文本状态
        function convertToText() {
            input.style.display = 'none'
            save.style.display = 'none'
            cancel.style.display = 'none'
            content.style.display = 'inline'
        }

        // 编辑状态
        function convertToEdit() {
            input.style.display = 'inline'
            save.style.display = 'inline'
            cancel.style.display = 'inline'
            content.style.display = 'none'
        }
        convertToText();
        content.addEventListener('click',function(){
            convertToEdit()
            // 输入框里是最新的签名
            input.value = content.innerText
        }) 
        // 点击保存
        save.addEventListener('click',function(){
            content.innerText = input.value
            convertToText()
        })
        // 点击取消
        cancel.addEventListener('click',function(){
            convertToText()
        })
    </script>
</body>
</html>

3. Form实现

优点：

内置功能：表单元素自带很多内置功能，如自动完成、验证、提交等。
可访问性：表单元素通常具有更好的可访问性支持，更容易被屏幕阅读器识别。
用户习惯：用户对表单元素的操作更为熟悉，使用体验更加自然。
事件处理：表单元素提供了丰富的事件（如submit、change等），便于处理各种用户操作。

缺点：

复杂性：需要处理表单提交、重置等逻辑，代码可能会稍微复杂一些。
性能：表单元素可能比纯DOM元素占用更多资源，尤其是在大量数据的情况下。
布局限制：表单元素的默认样式和行为可能需要额外的CSS和JavaScript来调整，以适应特定的设计需求。

适用场景：

需要复杂的数据验证和提交逻辑。
需要处理多种类型的输入（如文本、数字、日期等）。
重视可访问性和用户习惯。

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EditInPlace</title>
</head>
<body>
    <form action="http://www.baidu.com" method="post">
        <div>
            <label for="input">个性签名</label>
            <input type="text" name = 'signature' id = 'input' placeholder="请输入签名">
            <input type="submit" value = 'save'>
            <input type="submit" value = 'cancel'>
        </div>
    </form>
</body>
</html>