输入文本框高度自适应实现 兼容火狐与IE各版本浏览器

最新推荐文章于 2023-03-07 13:35:58 发布
最新推荐文章于 2023-03-07 13:35:58 发布
阅读量1.4k 收藏
点赞数
分类专栏： 前端开发 文章标签： 文本框高度自适应 文本框字数计算 文本输
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lucyyang2008/article/details/49513317
版权



难看的滚动条已经不受欢迎了，类似百度我要提问的高度自适应文本框一定是更为人性化和受人喜爱的吧。

不管是键盘输入还是鼠标粘贴复制文字，输入框都能实时监控到内容值的变化给予提示，是不是很体贴？！

下面我便讲诉一下如何能实现并兼顾到兼容性。

首先想到的是change事件，但用过change的都知道只有在input失去焦点时才会触发，并不能满足实时监测的需求，比如监测用户输入字符数。

oninput事件是IE之外的大多数浏览器支持的事件。

比如如下的一个标题输入框。

html code...</

最低0.47元/天 解锁文章
lucyyang2008
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element textarea 设置高度
轻风细雨_林木木
05-06 1万+
使用属性： 可以使用rows，或者使用自适应的autosize实现输入框的高度
elementUI中textarea组件无法autoSize问题记录
ch_jia_jia的博客
04-11 2502
问题：使用饿了么框架中的文本域组件，配置autoSize，使其自适应高度。在输入的过程中，可以正常达到自适应的效果。但预览时，即value有默认值时，autoSize失效。
解决IE和FF下textarea换行不一致的问题
kevinzkf的专栏
03-17 219
在IE下，输入到textarea的字符长度如果超过textarea的显示宽度，会出现自动换行，如果不是以明确px限定textarea的宽度（比如使用百分比），重新显示这个textarea时会发现textarea自动变宽，以在一行内容纳所有已输入的字符。这在某写情况下会打乱页面的布局，比如这个textarea是放在一个DIV的dialogue中。 而在FF下，则不会出现自动换行的情况，FF自动为超...
js在IE和FF下的兼容性问题
weixin_30401605的博客
05-19 220
作者 菜心作坊博客，火龙果软件 发布于2014-04-17 长久以来JavaScript兼容性一直是Web开发者的一个主要问题。在正式规范、事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬。为此，主要从以下几方面差异总结IE和Firefox的Javascript兼容性: 一、函数和方法差异...
浏览器兼容性问题2（持续更新中）
weixin_30664615的博客
12-28 838
1. HTML对象获取问题 FireFox：document.getElementById("idName"); ie:document.idname或者document.getElementById("idName"). 解决办法：统一使用document.getElementById("idName"); 2. const问题 说明:Firefox下,可以使用const关键字或...
文本框水印提示效果的简单实现代码
09-04
`filter:alpha(opacity=30)`、`-moz-opacity:0.3`和`opacity:0.3`分别设置了IE、Firefox和其他浏览器下的透明度，使其具有半透明效果。`position: absolute`使得水印可以相对于其最近的非静态定位祖先元素定位，`...
文本框日历插件(My97DatePicker).rar附demo视频讲解
02-03
6. **兼容性好**：支持主流的浏览器，包括IE6+、Firefox、Chrome、Safari和Opera等。 通过学习和应用My97DatePicker，开发者不仅可以提升网站的交互体验，还能在项目中实现更高效、更人性化的日期管理功能。视频...
div+css布局中常用方法汇总.docx
11-26
1. **文本框textarea自适应高度**：可以通过设置`textarea`的`style`属性，如`overflow-y: visible`，使其随内容自动调整高度。 2. **鼠标指针样式**：使用`cursor: pointer`可以使元素的鼠标指针变为手形，提示...
10个非常实用的CSS hack技术
09-27
`-moz-border-radius`, `-webkit-border-radius` 和 `border-radius` 分别用于Firefox、Safari/Chrome和现代浏览器，实现圆角效果。这样可以确保所有浏览器都能显示圆角边框。 4. **跨浏览器min-height属性** 在...
My97DatePicker
05-06
5. 兼容性好：支持多种浏览器，如IE6+、Firefox、Chrome、Safari等，确保在大多数环境下正常运行。 二、使用方法 1. 引入资源：在HTML页面中引入My97DatePicker的JS和CSS文件，确保它们在正确的位置加载。 2. 初始...
el-input type=‘textarea’后高度设置
m0_73216899的博客
03-07 2556
wu
element-ui input 框 宽高没效果的问题
aaassddd_a的博客
12-11 2149
使用 ::v-deep可以完美解决, ::v-deep .el-input__inner { height: 40px; width: 100%; line-height: 40px; } ::v-deep 是什么 如果你希望scoped样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用>>>操作符： <style scoped> .a >>> .b { /* ... */ } </style>...
vue+element文本域设置自适应和默认高度
走在搬砖的路上！
07-15 1980
<el-form-item label="私密" :label-width="'140px'" prop="private_key"> <el-input size="small" v-model="form.private_key" placeholder="请填写" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" ></el-input> </el-form-item> 通.
更强大的textarea高度自适应
热门推荐
樊小书生
03-18 3万+
最近自己写了一个关于textarea高度自适应的jquery插件，说明文档可点击查看此处：http://www.fxss5201.cn/project/html/textarea/autoHeightTextarea/ 之前说的textarea高度自适应是textarea在初始化的时候，将textarea的高度设置为scrollHeight的高度来实现其显示的时候高度自适应，但是大家应该都知道，
火狐浏览器 input元素size失效问题
ccmcu的博客
04-21 422
ubuntu火狐浏览器 input元素设size失效问题解决 //size="1"，设width就起效了 <input type="text" size='1' style="width:200px">
解决 el-input 修改 autosize 无效
MAIMIHO的博客
12-25 3904
resizeTextarea 给 el-input 加上 ref="xxx" 改变 autosize 后 调用 this.$refs.xxx.resizeTextarea(); 也可以再 nextTick 中调用 this.$nextTick(() => { this.$refs.xxx.resizeTextarea(); }); v-if el-input 里面内容过多的时候上述方法也无效了 可以使用 v-if 给 el-input 加上 v-if="xxx" 改变 autosize 后
使用deep穿透更改 Element ui 样式在 谷歌浏览器生效，而在火狐浏览器不生效问题
JKC_HOWL的博客
11-09 1561
使用/deep/穿透更改组件库样式在火狐浏览器不生效原因 /deep/ 穿透如果只是添加在父级的话，那么在火狐浏览器和谷歌浏览器都是生效的 /deep/ .father { width: 100%; height: 100%; .el-select .el-input .el-input__icon { line-height: 26px; color: #000000; } .avatar-uploader .el-upload { bor
css clearfix(针对火狐height:auto无效解决方案)
lzqial1987的专栏
04-23 1710
css clearfix(针对火狐height:auto无效解决方案) Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。 例： <div style=" width:50px; height:600px; border:#099 1px sol
html 行号编辑框,显示行号的文本框效果，兼容ie、火狐等浏览器
最新发布
06-02
您可以使用以下代码实现一个带行号的文本框效果： ...这段代码会在文本框左侧显示一个行号编辑框，通过 JavaScript 代码实现对文本框输入内容的监听，当文本框内容发生变化时，会自动更新行号编辑框的内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值