大家好,我想让textarea自适应容器的高度,设置height:100%
结果其他浏览器能自适应高度,就IE6/7不能,
望高手指点
<!DOCTYPE html> <html> <head> <title>textarea.html</title> <meta http-equiv="content-type" content="text/html; charset=GB18030"/> <style type="text/css"> .div{width:200px;height:200px;border:1px solid #999;padding:10px;float:left} .textarea{height:100%;width:100%;overflow:auto;border:1px solid #3164ac; zoom:1; display:block;/*都不能让ie6、7的height:100%起作用*/ } </style> </head> <body> <div class="div"> <textarea rows="0" cols="0" class="textarea">textarea</textarea> </div> <div class="div"> <span class="textarea">span</span> </div> <div class="div"> <img class="textarea" alt="img"></img> </div> <div class="div"> <input class="textarea" value="input"></input> </div> </body> </html>
其他浏览器显示
IE6/7显示
input和textarea无效,其他inline,inline-blcok元素都有效。
如果设置height:100px,IE6/7有效,只是设置百分比无效。
奇怪
相关推荐
一种可能的解决方案是使用CSS的`resize`属性,将其设置为`none`,以禁用用户的缩放功能,这在某些版本的IE中可以帮助解决问题。 ```css :auto-height-textarea textarea { resize: none; } ``` 现在,我们的Vue...
在这个示例中,`autoResizeTextarea`函数首先将`textarea`的高度重置为自动,然后将其高度设置为自身的滚动高度(`scrollHeight`),这是一个包含了可见和不可见部分的高度值。`addEventListener`方法则用于监听`...
4. **设置新高度**:比较textarea当前的高度和测量得到的高度,取较大者作为新的高度,并将其应用到textarea的样式中。确保设置了`overflow-y: hidden`以隐藏滚动条。 5. **防止无限增长**:为了防止textarea无限...
- 如果不是IE浏览器,先将TextArea的高度设为0,然后获取`scrollHeight`属性,即包含滚动条在内的元素实际高度。 - 根据`minHeight`和`maxHeight`限制最终的高度值,确保不会超出预设范围。 - 最后,设置TextArea的...
6. **防止无限循环**:为了防止因高度调整触发新的输入事件,形成无限循环,需要正确地设置事件处理逻辑,例如使用`setTimeout`进行延迟处理,或者在处理函数中添加标记来跳过不必要的调整。 `README.md` 文件通常...
在标题“flex3 textArea 高度自适应”中提到的问题,就是如何实现这样一个功能,让`TextArea`的大小随着其内容的增加而自动调整。 在描述中提到,已经有一个自定义的解决方案,可以依据文本内容自动调整`TextArea`...
### 在Textarea光标处插入...本文详细介绍了如何在`textarea`的光标位置插入文本的方法,包括IE和非IE浏览器的兼容性处理。通过分析提供的代码示例,我们不仅了解了其实现原理,还学习了如何在实际项目中应用这些知识。
否则IE(6|7|8)下插件失效.1. 加载jQuery库(1.4 )2. 加载textareaAutoHeight.js3. 使用以下接口调用插件:$('textarea').tah({ moreSpace:15, //输入框底部预留的空白, 默认15, 单位像素 maxHeight:600, //指定...
这段代码会在用户在`textarea`中输入文字时,自动调整其高度为内容的实际高度,从而避免了固定高度导致的显示问题。 至于去除滚动条,可以使用CSS样式来实现。对于水平滚动条,我们可以通过设置`overflow-x: hidden...
在你的案例中,只需将 `resize` 设置为 `none`,即可阻止用户改变 `textarea` 的大小。相关的CSS代码如下: ```css textarea { resize: none; } ``` 应用了这段CSS后,textarea元素将无法通过拖动边角来改变尺寸...
TextArea的换行行为主要受制于其自身的属性设置和外部调用的方法。从给定的代码片段来看,有两个TextArea实例:`text1`和`text2`。`text1`被配置为仅具有垂直滚动条(`TextArea.SCROLLBARS_VERTICAL_ONLY`),而`...
在本文中,我们将详细介绍如何使`textarea`随内容的高度固定而自动增宽,以及宽度固定时如何自动增高,并对`wrap`属性的几种设置进行详细解释。 ### 自动增宽与自动增高 在默认情况下,`textarea`元素的尺寸是固定...
`TextareaAutosize`是一种JavaScript解决方案,它允许`Textarea`的高度根据用户输入的内容动态调整,从而确保文本框始终能完整显示所有文本,无需手动设置固定的高度。这个特性极大地提升了用户体验,因为它避免了...
在网页设计中,文本区域(`textarea`)通常用于用户输入多行文本,但默认情况下,`textarea`元素仅提供基本的文本输入功能,没有太多装饰性或定制化的选项。然而,通过CSS(Cascading Style Sheets)我们可以扩展其...
IE6-9 input和textarea元素的placeholder(占位符)属性与textarea元素的maxlength(最大长度限制)属性的修复与所有浏览器的实时输入捕捉,仅需要提供一个元素或者元素id与实时捕捉回调函数(可选)。甚至实现了各...
基于Vue的高度自适应文本输入框 Use Setup (开始) Install auto-textarea (安装) $ npm install auto-textarea --save package.json "auto-textarea": "^1.3.6" Use (如何引入) // 方法一 // import with ES6 ...
textarea根据内容自适应高度 组件 注意:要监听input事件改变value值 使用: <autoheight_textarea value="{{value}}" placeholder="写个评论" bindinput="listenerinput"></autoheight_textarea>
本文将详细讲解如何使`textarea`在用户填写完文本后自动获取焦点,这一功能对于提高用户体验非常关键,特别是考虑到它在不同浏览器(如IE、Firefox和Chrome)中的兼容性。 首先,我们要明白`textarea`的基本结构。...
无滚动条Textarea自动适用高度.html Textarea
在网页开发中,`textarea` 是一个常用的元素,用于接收用户输入多行文本。然而,原始的 `textarea` 没有内置的功能来显示行号,这对于需要进行代码编辑或者查看多行文本的场景来说不够友好。为了提高用户体验,...