使用 div 自定义 input 和 textarea

已于 2025-01-21 16:56:08 修改
阅读量1.1k 收藏 25
点赞数 13
分类专栏： JS 文章标签： javascript 前端 开发语言 自定义 input
于 2025-01-21 16:54:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_52648900/article/details/145032650
版权

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&#
最低0.47元/天 解锁文章
用div实现textarea
weixin_46021847的博客
06-06 364
考察内容：HTML的contenteditable(设置可否编辑)属性。 一、简易版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用div实现textarea</title> </head> <body> <div contenteditable="true">点击这里，可直接进行编辑。&l
DIV 模拟 textarea
FOR 的博客
07-20 1213
呼呼呼~ textarea: 为什么？你已经无所不在了，还想着代替我？ div:不好意思了，你在你的领域确实很强大，但是input不能换行，而你却一言不合就出现滚动条，你得知道，这有时候，很丑。 textarea: 其实我是可以高度适应的，you look <style> textarea { padding: 0; } </style> <body> <textarea name="" id="area" cols="34"
div模拟textarea文本域轻松实现高度自适应
zibinghy
03-30 1446
<br />by zhangxinxu from http://www.zhangxinxu.com<br />本文地址： http://www.zhangxinxu.com/wordpress/?p=1362一、关于textarea文本域以及高度自适应<br />textarea标签为表单元素，一般用在多行文字的输入。在web应用上常见的是评论输入框，微博信息输入框等。例如企鹅微博的输入框：<br /><br />作为多行文本域功能来讲，textarea满足了我们大部分的需求。然而，textarea有一个
div实现textarea
weixin_42448623的博客
05-31 649
可编辑 contenteditable=true 可改变大小 resize:auto;overflow:auto; placeholder 添加placeholder属性，通过css选择器获取属性的值，添加到伪类中 监听文本内容是否为空 是否显示placeholder 实现过程 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv.
前端输入方案对比：原生Input与可编辑Div的全面解析
最新发布
mutuyxy的博客
03-15 572
Div vs Input：如何选择最适合的输入方案
div 实现 textarea
MorningDuGe
07-04 311
css.test_box{ width:500px; min-height:300px; max-height:500px; margin:0 auto; padding:3px; outline:0;//border外面[color style width] border:thin solid #666; font-size:12px
利用div实现input输入框
qq_897164979的博客
07-02 7377
工作中遇到了需要将带有html标签的内容放进input框中显示，用户还可以进行修改，发现通过设置<input>的value属性，不能将html元素进行转义显示，比如想让他显示 22 ， 但是实际显示了 2<sup>2</sup>，这显然不符合我们的要求。索性就把div伪装成一个input，这样就能通过$("#id").html(内容);的方式进行显示带有html...
获取div编辑框，textarea，input text的光标位置 兼容IE，FF和Chrome的方法介绍
09-05
本文将介绍如何在IE、Firefox和Chrome中获取div编辑框、textarea和input text光标位置的方法，并提供相应的代码示例。 首先，了解不同浏览器对于光标位置获取的支持情况是必要的。例如，IE浏览器使用了document....
jQuery实现提交表单时不提交隐藏div中input的方法
10-16
这里使用了jQuery的选择器`":input"`，它可以匹配所有的input、textarea、select和button元素。`$(".pc").find(":input")`就找到了`.pc`div内的所有这些元素。`attr("disabled", value)`方法用于设置或获取元素的...
angularjs使用div模拟textarea文本框的方法
10-17
在某些情况下，开发人员可能需要使用div元素来模拟传统的textarea文本输入框的功能，尤其是在需要对显示的文本进行富文本编辑时。本文将介绍如何使用AngularJS框架中的指令和绑定机制来实现这一功能，并详细解释了...
DynamicTextArea:没有以div形式包装的textarea组件。 它还可以动态调整大小并与光环绑定一起使用！！
05-03
1. **事件监听**：通过监听`textarea`的`input`或`change`事件来检测文本的变化，进而调整其大小。 2. **CSS样式**：利用CSS控制`textarea`的初始尺寸以及如何根据内容自动扩展。 3. **JavaScript操作DOM**：动态...
div自定义textArea输入框
shutong
01-13 806
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
div 实现 input、textarea 输入框，支持 placeholder 属性
qq_40287084的博客
05-20 414
div 实现 input、textarea 输入框，支持 placeholder 属性
【HTML】使用 div 自定义实现 input、textarea 输入框（适合定制化场景）
qq_45677671的博客
07-05 4345
使用 div 自定义实现 input、textarea 输入框（适合定制化场景）
用div来模拟textarea的实现
weixin_41970780的博客
11-30 272
用div来模拟textarea的实现 <style> div{ width: 400px; min-height: 100px; max-height: 300px; _height: 100px; //IE6 margin-left: auto; margin-right: auto; padding: 3px; outline: 0; border: 1px solid #a0b3d6; font-si
html用div模拟文本框,如何使用div模拟实现textarea？
weixin_35062801的博客
06-08 1765
我们都知道textarea是form表单中一个很常见的元素，用于多行文本输入，可以设置行数和列数。但是默认的textarea样式在页面上看起来是很丑的，很多页面都是采用div模拟textarea实现。例如QQ空间主页面的发表说说，在你看页面源码后就会发现这个输入框其实是一个div元素，并不是一个textarea元素，现在我们就来看看这是如何实现的吧？首先来看看实现的效果是什么样的。实现效果关键属性...
VSCode 开发Vue必备插件
2301_78416672的博客
05-06 848
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
使用 div 实现 input、textarea 输入框，并支持 placeholder 属性（解决浏览器兼容问题）
卡尔特斯
11-22 6139
解决这个问题的初衷：在做文本编辑器时，系统自带的 textarea 在 火狐 浏览器中回车不会进行换行，被显示成了空格，找了好几种方案没解决，试了下 div 实现 input、textarea 的方式，发现可以完美解决这个问题 一、div 实现 textarea 1、给 div 添加 contenteditable="true" 属性，使 div 元素变成用户可编辑。 2、给 div 添加 resize: both; 样式，使 div 可以被用户调整尺寸，注意：同时需要设置 overf
使用 div 实现 input、textarea 输入框，并支持 placeholder 属性（解决浏览器兼容问题）(1)
csdnlaoban的博客
05-16 737
可以被用户调整尺寸，注意：同时需要设置。元素变成用户可编辑。元素变成用户可编辑。
input的textarea，blur不会生效
03-02
### 解决 Textarea `blur` 事件不生效的方法 在某些情况下，特别是在特定设备或浏览器上，`textarea` 的 `blur` 事件可能不会按预期工作。针对这一问题，可以采用多种方法来确保 `blur` 事件能够正常触发。 #### 方法一：使用 JavaScript 手动控制焦点 可以通过监听整个文档的点击事件，在点击发生时手动判断并移除指定输入框的焦点。这种方法适用于处理页面内任意位置点击导致的失焦情况[^3]。 ```javascript document.addEventListener('click', function(event){ var target = event.target; let selector = document.querySelector('#yourTextAreaId'); // 替换为实际的选择器 if (!selector.contains(target)) { selector.blur(); } }); ``` #### 方法二：利用只读属性配合样式调整 对于移动设备特别是苹果手机上的特殊情况，设置输入框为只读状态 (`readonly`) 并结合 CSS 控制光标的可见性是一种有效的策略。当不再需要编辑时切换到只读模式，并改变鼠标指针形状以提示用户当前字段不可交互。 ```css input.readonly, textarea.readonly{ cursor: not-allowed !important; } ``` ```html <textarea id="example" class="${isReadOnly ? 'readonly' : ''}"></textarea> ``` #### 方法三：借助框架特性优化操作流程 如果是在 Vue 或 UniApp 环境下开发，则可以直接利用其提供的 API 对组件行为进行更精细地管理。比如通过给自定义组件绑定 `ref` 属性，之后就可以方便地调用该实例下的任何公开函数来进行诸如关闭键盘之类的动作[^4]。 ```vue <template> <div> <!-- 定义 --> <chatInput ref="msgInput"></chatInput> <!-- 其它代码 --> <button @click="handleBlur">点击失焦</button> </div> </template> <script> export default { methods: { handleBlur(){ this.$refs.msgInput.blurFunction(); // 假设有一个 blurFunction 方法用于使 input 失去焦点 } } }; </script> ``` 以上三种方式可以根据具体的应用场景和个人偏好灵活选用，从而有效解决不同平台和环境下可能出现的 `textarea` `blur` 事件失效的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值