前端输入方案对比：原生Input与可编辑Div的全面解析

沐土Arvin

已于 2025-03-15 16:43:02 修改

阅读量532

点赞数 4

文章标签：前端 html javascript

于 2025-03-15 16:41:30 首次发布

本文链接：https://blog.csdn.net/mutuyxy/article/details/146281452

版权

一般我是使用contenteditable属性让一个<div>接受文本输入，并通过JavaScript监听输入事件来更新内容或改变样式

contenteditable 是一个枚举属性，表示元素是否可被用户编辑。如果可以，浏览器会修改元素的组件以允许编辑;

该属性必须是下面的值之一：

true 或空字符串，表示元素是可编辑的。
false 表示元素不是可编辑的。
plaintext-only 表示元素的原始文本是可编辑的，但富文本格式会被禁用。

如果没有设置该属性的值（例如：<label contenteditable>Example Label</label>），则其值被视为空字符串。

如果没给出该属性或设置了无效的属性值，则其默认值继承自父元素：即，如果父元素可编辑，该子元素也可编辑。

注意，虽然该属性允许设定的值包括 true 和 false，但该属性仍是一个枚举属性而非布尔属性。

你可以使用 CSS caret-color 属性设置用于绘制文本插入 caret 的颜色。

完整代码如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Div模拟输入框示例</title>
    <style>
        .editable-div {
            width: 300px;
            min-height: 32px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin: 10px 0;
            outline: none;
            white-space: pre-wrap;  /* 保留换行 */
        }

        .editable-div:focus {
            border-color: #409eff;
            box-shadow: 0 0 4px rgba(64, 158, 255, 0.3);
        }

        .input-box {
            width: 300px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin: 10px 0;
        }

        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
        }

        .output {
            color: #666;
            margin-top: 20px;
            padding: 10px;
            border: 1px dashed #ccc;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 可编辑div -->
        <div 
            class="editable-div" 
            contenteditable="true"
            placeholder="请输入内容（支持换行）"
            id="customInput"
        ></div>

        <!-- 原生input -->
        <input 
            type="text"
            class="input-box"
            placeholder="原生输入框"
            id="nativeInput"
        >

        <!-- 输出区域 -->
        <div class="output" id="output"></div>

        <script>
            const customInput = document.getElementById('customInput')
            const nativeInput = document.getElementById('nativeInput')
            const output = document.getElementById('output')

            // 公共事件处理
            const handleEvent = (type, element) => {
                output.innerHTML = `
                    ${new Date().toLocaleTimeString()}
                    <br>事件类型: ${type}
                    <br>当前值: ${element.innerText || element.value}
                `
            }

            // 绑定div事件
            customInput.addEventListener('input', () => handleEvent('input', customInput))
            customInput.addEventListener('focus', () => handleEvent('focus', customInput))
            customInput.addEventListener('blur', () => handleEvent('blur', customInput))

            // 绑定input事件
            nativeInput.addEventListener('input', () => handleEvent('input', nativeInput))
            nativeInput.addEventListener('focus', () => handleEvent('focus', nativeInput))
            nativeInput.addEventListener('blur', () => handleEvent('blur', nativeInput))
        </script>
    </div>
</body>
</html>