使用 div 自定义 input 和 textarea

1. 为什么要自定义呢?

原生的 input 和 textarea 在某些特定场景下存在功能或兼容性限制,因此使用 div 元素自定义实现,突破原生输入框在样式、功能、兼容性上的限制。

1、解决火狐浏览器换行问题

某些版本的火狐浏览器中,原生 textarea 存在回车不换行而显示为空格的问题。这种行为在开发文本编辑器或多行输入框时造成不便。

2、提供更灵活的样式和内容格式

原生 input 和 textarea 元素样式定制有限,比如:无法直接改变 textarea 的行高或在内容中插入动态元素,如:标签或图标。原生输入框的内容只能是纯文本,难以直接支持复杂的文本格式,如:加粗、斜体或自定义样式。

3、跨平台或多浏览器兼容

不同的浏览器和设备对原生输入框的支持程度有所不同,尤其是一些老旧浏览器或特定版本的浏览器可能会对 input 和 textarea 产生不同的渲染结果。

2. 实现方法

contenteditable = "true" 是一个 HTML 属性,能够将 div 或其他元素变成一个可编辑的区域。用户可以输入文本,而浏览器会处理光标、输入等基本交互行为。通过监听相应的事件,可以让这个可编辑的 div 元素实现更复杂的行为和功能。

2.1 实现带 placeholder 的输入框

div 本身并没有内建的 placeholder 属性,但可以使用 CSS 和 JavaScript 来模拟该功能。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><style>.custom-input {border: 1px solid #ccc;padding: 5px;border-radius: 4px;outline: none;word-wrap: break-word; /* 自动换行 */white-space: pre-wrap; /* 支持空格换行 */overflow-y: auto;position: relative;}.custom-input-wrapper {position: relative;}.custom-input:empty::before {content: attr(data-placeholder); /* 使用 data-placeholder */color: #aaa;position: absolute;top: 5px;left: 8px;pointer-events: none;}</style></head><body><div class="custom-input-wrapper"><div class="custom-input" contenteditable="true" data-placeholder="请输入内容..."></div></div><script>const inputBox = document.querySelector('.custom-input');// 监听输入事件,动态处理内容为空时显示 placeholderinputBox.addEventListener('input', () => {if (!inputBox.textContent.trim()) {inputBox.setAttribute('data-placeholder', '请输入内容...');} else {inputBox.removeAttribute('data-placeholder');}});</script></body>
</html>

效果展示:

2.2 实现内容插入到光标位置

插入内容到光标位置是自定义输入框中非常常见的需求,例如:在文本框中插入表情符号或链接等。通过 JavaScript 中的 Range 和 Selection API,可以精确控制光标位置。

<button>插入内容</button>
<div class="custom-input" contenteditable="true" data-placeholder="请输入内容..."></div><script>function insertTextAtCursor(text) {const selection = window.getSelection();const range = selection.getRangeAt(0);range.deleteContents(); // 删除选中内容const textNode = document.createTextNode(text);range.insertNode(textNode); // 插入新内容range.setStartAfter(textNode); // 设置光标到插入文本后range.collapse(true); // 合并范围selection.removeAllRanges();selection.addRange(range);}document.querySelector('button').addEventListener('click', () => {insertTextAtCursor('插入的内容');});
</script>

效果展示:

3. 优缺点

3.1 优点

1、兼容性

使用 word-wrap: break-word 和 white-space: pre-wrap,可以确保不同浏览器中实现的换行行为一致。

2、灵活性

可以完全自定义样式和行为,比如控制光标的样式、输入框的大小、边框样式等。此外,使用 JavaScript 可以更加方便地动态插入和编辑内容。

3、支持插入光标位置

通过 Selection 和 Range API,可以精确的将文本插入到当前光标位置。

3.2 缺点

1、事件监听复杂

与原生的 input 和 textarea 不同,设置 contenteditable = "true" 的元素需要手动管理 placeholder 的显示与隐藏,处理焦点事件(focus、blur)和输入事件等,增加开发复杂性。

2、内容格式问题

由于 div 中的内容是可以包含 HTML 的,用户可能会误输入 HTML 标签或其他不合适的内容,要求开发者处理内容时格外小心,避免引发 XSS(跨站脚本攻击)等安全问题,且需要对输入内容进行过滤和清理。

3、性能问题

对于输入内容较长的情况,频繁的 DOM 操作可能会导致性能下降,尤其是当需要处理大量内容时,可能会影响用户体验。

4. 存在问题

4.1 控制输入内容长度

contenteditable 默认不限制输入,需要额外监听 input 事件并判断长度。

inputBox.addEventListener('input', () => {const maxLength = 200;if (inputBox.textContent.length > maxLength) {inputBox.textContent = inputBox.textContent.slice(0, maxLength);}
});
4.2 处理用户粘贴带有 HTML 内容

用户粘贴内容时,可能会不小心粘贴带有 HTML 标签的内容。我们可以通过监听 paste 事件,过滤粘贴内容,只保留纯文本:

inputBox.addEventListener('paste', (event) => {event.preventDefault();const text = event.clipboardData.getData('text/plain');document.execCommand('insertText', false, text);
});

总结

使用 contenteditable="true" 属性,可以实现一个高度自定义、功能强大的输入框,克服原生 input 和 textarea 的局限性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/893296.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Golang的网络编程安全

Golang的网络编程安全 一、Golang网络编程的基本概念 作为一种现代化的编程语言&#xff0c;具有优秀的并发特性和网络编程能力。在Golang中&#xff0c;网络编程是非常常见的需求&#xff0c;可以用于开发各种类型的网络应用&#xff0c;比如Web服务、API服务、消息队列等。Go…

springboot集成websocket实现实时大量数据,效率性能高

前言 小编我将用CSDN记录软件开发求学之路上亲身所得与所学的心得与知识&#xff0c;有兴趣的小伙伴可以关注一下&#xff01; 也许一个人独行&#xff0c;可以走的很快&#xff0c;但是一群人结伴而行&#xff0c;才能走的更远&#xff01;让我们在成长的道路上互相学习&…

如何使用usememo和usecallback进行性能优化,什么时候使用usecallback,什么时候使用usememo

React useMemo 和 useCallback 性能优化总结以及使用场景 基本概念 useMemo 用于缓存计算结果&#xff0c;避免在每次渲染时重复进行昂贵的计算。 useCallback 用于缓存函数引用&#xff0c;避免在每次渲染时创建新的函数引用。 使用时机对比 useMemo 适用场景 复杂计算…

Python新春烟花

目录 系列文章 写在前面 技术需求 完整代码 下载代码 代码分析 1. 程序初始化与显示设置 2. 烟花类 (Firework) 3. 粒子类 (Particle) 4. 痕迹类 (Trail) 5. 烟花更新与显示 6. 主函数 (fire) 7. 游戏循环 8. 总结 注意事项 写在后面 系列文章 序号直达链接爱…

vscode 设置

一、如何在vscode中设置放大缩小代码 1.1.文件—首选项——设置 1.2.在搜索框里输入“Font Ligatures”&#xff0c;然后点击"在settings.json中编辑" 1.3.在setting中&#xff08;"editor.fontLigatures":前&#xff09;添加如下代码 "editor.mous…

航电系统路线规划克隆核心技术!

一、航电系统 航电系统&#xff08;Avionics System&#xff09;是民用飞机的“大脑”与“神经”&#xff0c;分为航电核心处理与数据传感两个部分。航电核心处理系统采用综合模块化、开放式系统结构&#xff0c;为飞机提供公共计算、网络通信和接口、飞行管理、显示与告警、机…

win内核内部直接irp读取文件写入文件

#include <ntifs.h> #include <ntddk.h> #define TAG_NAME tlfF // FltF in reverse #define BUFFER_SIZE PAGE_SIZE // 驱动设备扩展结构 typedef struct _DEVICE_EXTENSION { PDEVICE_OBJECT DeviceObject; UNICODE_STRING DeviceName; UNICODE_STRIN…

OSCP - Proving Grounds - BullyBox

主要知识点 如果发现有域名&#xff0c;则可以加入/etc/hosts后重新执行nmap,nikto等扫描dirsearch的时候可以使用完整一些的字典文件&#xff0c;避免漏掉信息.git dump 具体步骤 执行nmap 扫描&#xff0c;发现 80和22端口开放,访问后发现被重定向到 bullybox.local Star…

【计算机网络】传输层协议TCP与UDP

传输层 传输层位于OSI七层网络模型的第四层&#xff0c;主要负责端到端通信&#xff0c;可靠性保障&#xff08;TCP&#xff09;&#xff0c;流量控制(TCP)&#xff0c;拥塞控制(TCP)&#xff0c;数据分段与分组&#xff0c;多路复用与解复用等&#xff0c;通过TCP与UDP协议实现…

HBased的原理

一、什么是HBase HBase是一个分布式&#xff0c;版本化&#xff0c;面向列的数据库&#xff0c;依赖Hadoop和Zookeeper &#xff08;1&#xff09;HBase的优点 提供高可靠性、高性能、列存储、可伸缩、实时读写的数据库系统 (2) HBase 表的特性 Region包含多行 列族包含多…

cmake 可使用的构建系统

cmake 可使用的构建系统 ChatGPT 说&#xff1a; ChatGPT CMake 支持多种构建系统&#xff0c;允许用户根据其开发环境选择适合的构建工具。以下是 CMake 常用的构建系统和生成器&#xff1a; 1. Visual Studio 系列 适用于 Windows 环境的 Visual Studio 构建系统&#xf…

MongoDB 备份与恢复综述

目录 一、基本概述 二、逻辑备份 1、全量备份 2、增量备份 3、恢复 三、物理备份 1、cp/tar/fsync 2、WiredTiger 热备份 3、恢复 四、快照备份 一、基本概述 MongoDB 是一种流行的 NoSQL 数据库&#xff0c;它使用文档存储数据&#xff0c;支持丰富的查询语言和索引…

5. 马科维茨资产组合模型+AI金融智能体(qwen-max)+政策信息优化方案(理论+Python实战)

目录 0. 承前1. AI金融智能体1.1 What is AI金融智能体1.2 Why is AI金融智能体1.3 How to AI金融智能体 2. 数据要素&计算流程2.1 参数集设置2.2 数据获取&预处理2.3 收益率计算2.4 因子构建与预期收益率计算2.5 协方差矩阵计算2.6 投资组合优化2.7 持仓筛选2.8 AI金融…

后端开发基础——JavaWeb(Servlet)

Servlet 关于系统架构 系统架构包括什么形式&#xff1f; C/S架构 B/S架构 C/S架构&#xff1f; Client / Server&#xff08;客户端 / 服务器&#xff09; C/S架构的软件或者说系统有哪些呢&#xff1f; QQ&#xff08;先去腾讯官网下载一个QQ软件&#xff0c;几十MB&…

Hanlp的学习

参考&#xff1a;HanLP 自然语言处理使用总结-CSDN博客 参考&#xff1a;Sprint Boot 工程中HanLP配置相对路径&#xff0c;始终有问题的解决方案_springboot hanlp-CSDN博客 <!--hanlp 依赖--><dependency><groupId>com.hankcs</groupId><artifa…

element ui 对数组里面的多个相同的字段进行校验在

element ui 对数组里面的多个相同的字段进行校验 在 Element UI 中&#xff0c;如果需要对数组中的多个相同字段进行校验&#xff08;例如动态生成的表单字段&#xff09;&#xff0c;可以通过动态绑定 prop 和 rules 来实现。以下是具体的实现方法&#xff1a; 示例场景 假设…

LLMs(大型语言模型)的多智能体:Auto-GPT

LLMs(大型语言模型)的多智能体:Auto-GPT 是指在一个系统中集成多个具有不同能力、角色和任务的智能体,这些智能体能够相互协作、沟通和交互,以共同完成复杂的任务或解决复杂的问题。每个智能体都可以被视为一个独立的实体,具有自己的策略、目标和知识库,通过相互之间的…

实测点云标注工具

实测点云标注工具 1.labelCloud ​ 链接&#xff1a;https://github.com/ch-sa/labelCloud.git ​ 跟着安装无坑。 ​ 使用体验&#xff0c;自定义框操作不太灵便。 2.annotate ​ 链接&#xff1a;https://github.com/Earthwings/annotate.git ​ 操作友好方便&#xf…

JSON全解析:语法、转换与FastJson应用指南

大家好&#xff0c;我是袁庭新。JSON是一种轻量级、基于文本、开放式的数据交换格式。在数据交换的世界里&#xff0c;JSON 扮演着重要角色。它究竟为何备受青睐&#xff1f;下面就为您详细解读其奥秘与应用。 1.JSON简述 JSON&#xff08;JavaScript Object Notation&#…

Java模拟路由协议-rip(路由器仿真实验)

前言&#xff1a; 好久不见&#xff0c;有段时间没有写文章了&#xff0c;本篇文章&#xff0c;由Blue我带大家来复现rip协议。我们以 b站湖南教师匠所讲rip的视频中的例子为我这篇文章所模拟的路由路径 如图&#xff1a; 模拟路径 视频&#xff1a;http://【深入浅出计算机网络…