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

最新推荐文章于 2023-03-07 13:35:58 发布

lucyyang2008

最新推荐文章于 2023-03-07 13:35:58 发布

阅读量1.4k

点赞数

分类专栏：前端开发文章标签：文本框高度自适应文本框字数计算文本输

本文链接：https://blog.csdn.net/lucyyang2008/article/details/49513317

版权

本文介绍了如何创建一个高度自适应的文本输入框，以适应不同浏览器，包括火狐和IE。通过oninput事件和IE的onpropertychange事件，结合JavaScript和CSS，实现实时监测文本框内容变化并调整高度。代码示例展示了在不同浏览器中应用此功能的方法。

摘要由CSDN通过智能技术生成

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

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

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

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

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

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

html code...</

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lucyyang2008

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

文本框水印提示效果的简单实现代码

09-04

`filter:alpha(opacity=30)`、`-moz-opacity:0.3`和`opacity:0.3`分别设置了IE、Firefox和其他浏览器下的透明度，使其具有半透明效果。`position: absolute`使得水印可以相对于其最近的非静态定位祖先元素定位，`...

elementUI中textarea组件无法autoSize问题记录

最新发布

ch_jia_jia的博客

04-11

2786

问题：使用饿了么框架中的文本域组件，配置autoSize，使其自适应高度。在输入的过程中，可以正常达到自适应的效果。但预览时，即value有默认值时，autoSize失效。

参与评论您还未登录，请先登录后发表或查看评论

解决IE和FF下textarea换行不一致的问题

kevinzkf的专栏

03-17

227

在IE下，输入到textarea的字符长度如果超过textarea的显示宽度，会出现自动换行，如果不是以明确px限定textarea的宽度（比如使用百分比），重新显示这个textarea时会发现textarea自动变宽，以在一行内容纳所有已输入的字符。这在某写情况下会打乱页面的布局，比如这个textarea是放在一个DIV的dialogue中。而在FF下，则不会出现自动换行的情况，FF自动为超...

element textarea 设置高度

轻风细雨_林木木

05-06

1万+

使用属性：可以使用rows，或者使用自适应的autosize实现输入框的高度

js在IE和FF下的兼容性问题

weixin_30401605的博客

05-19

223

作者菜心作坊博客，火龙果软件发布于2014-04-17 长久以来JavaScript兼容性一直是Web开发者的一个主要问题。在正式规范、事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬。为此，主要从以下几方面差异总结IE和Firefox的Javascript兼容性: 一、函数和方法差异...

vue+element文本域设置自适应和默认高度

走在搬砖的路上！

07-15

2054

<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> 通.

文本框日历插件(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. 初始...

element-ui input 框宽高没效果的问题

aaassddd_a的博客

12-11

2251

使用 ::v-deep可以完美解决, ::v-deep .el-input__inner { height: 40px; width: 100%; line-height: 40px; } ::v-deep 是什么如果你希望scoped样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用>>>操作符： <style scoped> .a >>> .b { /* ... */ } </style>...

浏览器兼容性问题2（持续更新中）

weixin_30664615的博客

12-28

853

1. HTML对象获取问题 FireFox：document.getElementById("idName"); ie:document.idname或者document.getElementById("idName"). 解决办法：统一使用document.getElementById("idName"); 2. const问题说明:Firefox下,可以使用const关键字或...

el-input type=‘textarea’后高度设置

m0_73216899的博客

03-07

2793

更强大的textarea高度自适应

热门推荐

樊小书生

03-18

4万+

最近自己写了一个关于textarea高度自适应的jquery插件，说明文档可点击查看此处：http://www.fxss5201.cn/project/html/textarea/autoHeightTextarea/ 之前说的textarea高度自适应是textarea在初始化的时候，将textarea的高度设置为scrollHeight的高度来实现其显示的时候高度自适应，但是大家应该都知道，

火狐浏览器 input元素size失效问题

ccmcu的博客

04-21

437

ubuntu火狐浏览器 input元素设size失效问题解决 //size="1"，设width就起效了 <input type="text" size='1' style="width:200px">

解决 el-input 修改 autosize 无效

MAIMIHO的博客

12-25

4027

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 后

css clearfix(针对火狐height:auto无效解决方案)

lzqial1987的专栏

04-23

1728

css clearfix(针对火狐height:auto无效解决方案) Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。例： <div style=" width:50px; height:600px; border:#099 1px sol

使用deep穿透更改 Element ui 样式在谷歌浏览器生效，而在火狐浏览器不生效问题

JKC_HOWL的博客

11-09

1589

使用/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

input输入框中的光标上下不居中的解决方法

蝈蝈的博客

07-18

1万+

谷歌和火狐下input输入框中的光标大小显示不一致 input输入框用一个背景图模拟，设置height和line-height一样的高度，使里面的输入文字能够居中，在FF下出现的情况是：点击input时，输入光标其实上跟input的height一样高，但当开始输入文字时，光标又变得跟文字一样高，chrome下光标跟input的height一样高，而IE下光标跟文字的大小一致。一直没弄明白为什

FireFox文本框百分比自适应padding显示bug解决方案：text-indent的应用

通常的做法是在输入元素上设置`padding-left`以保持光标与左侧边缘的距离，但在非现代浏览器（如Firefox早期版本）中，固定数值的padding并不支持完全的百分比自适应。标准做法是利用CSS3的`calc()`函数，尝试通过...

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

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