textarea文本域宽度和高度（width、height）自动适应变化处理

最新推荐文章于 2024-03-15 16:36:49 发布
最新推荐文章于 2024-03-15 16:36:49 发布
阅读量5k 收藏
点赞数
分类专栏： Web开发 文章标签： textarea 自适应宽度 自适应高度
  1. <HTML>  
  2. <HEAD>  
  3. <TITLE>textarea宽度、高度自动适应处理方法</TITLE>  
  4. <!-- 控制宽度的自动适应 -->  
  5. <style type="text/css">  
  6. .comments {  
  7.  width:100%;/*自动适应父布局宽度*/  
  8.  overflow:auto;  
  9.  word-break:break-all;  
  10. /*在ie中解决断行问题(防止自动变为在一行显示，主要解决ie兼容问题，ie8中当设宽度为100%时，文本域类容超过一行时，  
  11. 当我们双击文本内容就会自动变为一行显示，所以只能用ie的专有断行属性“word-break或word-wrap”控制其断行)*/  
  12. }  
  13. </style>  
  14. </HEAD>  
  15.   
  16. <BODY>  
  17. <FORM   METHOD=POST   ACTION= " ">  
  18. <!-- 主要控制高度的自动适应 -->  
  19.   
  20. <!-- 第一个是普通textarea -->  
  21. <textarea class="comments" rows="10" cols="10"> </textarea>  
  22. <!-- 以下两种方式都可以解决textarea行高自动适应类容的高度 -->  
  23. <textarea class="comments" rows=1   name=s1   cols=27   onpropertychange= "this.style.posHeight=this.scrollHeight "></textarea>  
  24.   
  25. <textarea class="comments" style="height:expression((this.scrollHeight>150)?'150px':(this.scrollHeight+5)+'px');overflow:auto;"></textarea>   
  26. </FORM>  
  27. </BODY>  
  28. </HTML>  
  29. 文章来源：http://www.cnblogs.com/jice/archive/2011/08/07/2130069.html
晨山往事
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
textarea高度自增
Lee的博客
03-27 2万+
var observe;      if (window.attachEvent) { observe = function (element, event, handler) { element.attachEvent('on'+event, handler); }; } else { observe = function (el...
textarea高度根据输入内容自动调整高度
最新发布
ITronger的专栏
04-18 931
实际使用时你可能需要根据你的样式和字体调整这个值。此外，如果你使用了外部 CSS 框架或库，可能还需要考虑它们对。元素的高度根据输入内容自动调整，同时限制其最大高度为 6 行，通常涉及到监听输入事件，并动态调整。来获取其内容的滚动高度，然后将其限制在最大高度内。来计算每行的高度，这样可以适应不同字体大小和行高设置。事件，以处理浏览器窗口大小变化时可能导致的行高变化。函数一次，以确保初始状态的高度也是正确的。在这个示例中，我们首先在 CSS 中设置。的最小和最大高度，假设每行的高度是。的样式和行为的影响。
textarea文本域宽度和高度（width、height）自己主动适应变化处理
weixin_30328063的博客
09-19 823
文章来源：http://www.cnblogs.com/jice/archive/2011/08/07/2130069.html <HTML> <HEAD> <TITLE>textarea宽度、高度自己主动适应处理方法</TITLE> <!-- 控制宽度的自己主动适应 --> <style type="text...
【Javascript】文本框textarea高度随内容自适应增长收缩
bangzi3783的博客
07-12 187
方法一、 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><HTML><HEAD><meta htt...
textarea高度自适应的两种方案
高先生的猫
09-11 3021
方案一 html5 Textarea 元素 1. 自动获得焦点 点击编辑自动获得焦点后光标跳转到了最前面，why? 查文档MDN，textarea元素存在selectionEnd和selectionStart的属性用来表示选中的文本开始位置和结束位置，DOM接口实例是htmlTextAreaElement， 它具有setSelectionRange方法，用来选中输入框中的文本，用法： TextAreaElement.setSelectionRange(selectionStart, se...
textarea的自适应高度
weixin_59787755的博客
03-15 1301
场景：textarea的高度需要随着输入内容的增加而增加。方法一：div模拟textarea。方法二：监听输入事件+窗口滚动高度。
textarea文本域宽度和高度width及height自动适应实现代码
09-28
本文将详细介绍如何通过JavaScript和CSS来实现`textarea`文本域的宽度和高度自适应。 首先，对于宽度的自动适应，通常我们希望`textarea`能填满其父容器的宽度。在HTML中，我们可以给`textarea`添加一个CSS类，如`...
在textarea文本域中显示HTML代码的方法
12-10
iframe ID=”tryit” MARGINHEIGHT=”1″ MARGINWIDTH=”1″ width=”100%” height=”300″ scrolling=”auto”></iframe>    [removed]   tryit.document.designMode=”On”;   tryit.document....
css textarea 高度自适应,无滚动条
09-27
然而，对于IE6，存在一个问题，即当`textarea`的宽度设置为100%时，输入文字会导致宽度自动增加。解决这个问题的一种方法是在`textarea`外包裹一个100%宽度的`div`。 ```html <div style="width:100%"> <textarea ...
textarea自适应高度标签，去除难看的滚动条
10-13
这段代码会在用户在`textarea`中输入文字时，自动调整其高度为内容的实际高度，从而避免了固定高度导致的显示问题。 至于去除滚动条，可以使用CSS样式来实现。对于水平滚动条，我们可以通过设置`overflow-x: hidden...
固定textarea文本域尺寸
04-17
textarea元素在chrome等浏览器下可以被拖拉从而改变大小，对于查看textarea里面的内容来说相当方便,但是有时候,我们为了保持网页的美观，不得不想要禁掉这个功能，禁止用户随意拉动textarea的大小
textarea 高度自适应细节展示
w_shuhua的博客
03-06 480
textarea 高度自适应细节展示 用 textarea 实现输入框，在用户输入时，设置输入框的高度为 auto 然后取出输入框的 scrollHeight ，这个属性是指，在不出现滚动条的情况下把元素的内容(包含 padding )全部显示出来的最小高度 最后重新设置输入框的高度为 scrollHeight 最后，会发现，当输入内容不满一行时，输入框会变高，这是因为 textarea 的 ro...
textarea自适应高度二——（设置隐藏div获取高度和仿element-ui组件）
weixin_44784401的博客
07-07 4477
textarea自适应高度二——（设置隐藏div获取高度和仿element-ui组件）
css设置textarea宽高,textarea自动调整高宽
weixin_42709044的博客
08-04 3382
css:#textarea {display: block;margin:0 auto;overflow: hidden;width: 550px;font-size: 14px;height: 18px;line-height: 24px;padding:2px;}textarea {outline: 0 none;border-color: rgba(82, 168, 236, 0.8);bo...
textarea内容自动撑开高度，实现高度自适应
前端队长Daotin
06-29 8893
大家好，我是前端队长Daotin，想要获取更多前端精彩内容，关注我(全网同名)，解锁前端成长新姿势。 以下正文： textarea使我们常用的表单元素。一般用于多行文字的输入。在绝大多数情况下，都可以满足我们的要求。 但是它有一个缺点是，它的高度是固定了，如果文本内容超出了它设定的高度时，就会显示出丑陋的滚动条。 然后有些时候，为了用户体验，我们需要让它的高度随着文本内容的高度而动态变化。 最经...
文本域(textarea)的高度自适应实现两法
lzhw1985的专栏
08-29 357
随着HTML5的即将退出，相信大家对页面更加人性化有了一定的期待，这里我介绍两种方法，让你的textarea能够实现根据内容自动调整高度，让你的页面也炫起来！ 方法一，使用JS自动调整 &lt;textarea name="mytextarea" cols="80" style="overflow-y:hidden;height:80px;" onpropertychange...
用JS scrollHeight方法实现textarea输入高度自适应的方法
lucyyang2008的博客
09-16 4765
HTML源代码部分：                         {$answer['content']} //textarea高度自适应 function autosize(obj) {     var d_h = parseInt(obj.attributes['default_height'].value);     if(obj.scrollHeight
textarea如何实现高度自适应？
热门推荐
m553366999的博客
01-28 1万+
今天需要些一个回复评论的页面，设计师给的初始界面就是一个只有一行的框。然后当时就想这个交互该怎么实现比较好，然后想起了新浪微博的做法：点击评论，默认显示一行，当输入的文字超过一行或者输入Enter时，输入框的高度会随着改变，直到输入完毕。顿时觉得这个细节做得挺不错的，可以效仿下。下面分享2种实现textarea高度自适应的做法，一种是用div来模拟textarea来实现的，用CSS控制样式，不用JS；另一种是利用JS控制的（因为存在浏览器兼容问题，所以写起来比较麻烦）； 方法0:textarea高度自适应
css文本域
05-30
文本域（Textarea）是 HTML 中用于接收多行文本输入的一种表单元素，而 CSS 则可以用来对文本域进行样式设置。下面是一些常用的 CSS 样式属性及其作用： 1. width和height：设置文本域的宽度和高度。 2. font-size：设置文本域中字体的大小。 3. font-family：设置文本域中字体的类型。 4. color：设置文本域中字体的颜色。 5. background-color：设置文本域的背景颜色。 6. border：设置文本域的边框。 7. padding：设置文本域内容与边框之间的距离。 8. margin：设置文本域与其他元素之间的距离。 9. resize：设置文本域是否可以改变大小。 例如，下面的 CSS 代码可以设置一个宽度为 200px，高度为 100px，字体为 Arial，字体大小为 14px，字体颜色为红色，背景颜色为灰色，边框为实线黑色，内边距为 10px，外边距为 5px 的文本域： ``` textarea { width: 200px; height: 100px; font-family: Arial; font-size: 14px; color: red; background-color: gray; border: 1px solid black; padding: 10px; margin: 5px; resize: none; } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值