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

最新推荐文章于 2024-04-08 15:42:46 发布
最新推荐文章于 2024-04-08 15:42:46 发布
阅读量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 wrap
jueqi2010的专栏
07-26 213
通常情况下，当用户在输入文本区域中键入文本后，浏览器会将它们按照键入时的状态发送给服务器。只有用户按下 Enter 键的地方生成换行。如果您希望启动自动换行功能（word wrapping），请将 wrap 属性设置为 virtual 或 physical。当用户键入的一行文本长于文本区的宽度时，浏览器会自动将多余的文字挪到下一行，在文字中最近的那一点换行。wrap="virtual" 将实现文本...
textarea文本域宽度和高度（width、height）自己主动适应变化处理
weixin_30328063的博客
09-19 826
文章来源：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 3040
方案一 html5 Textarea 元素 1. 自动获得焦点 点击编辑自动获得焦点后光标跳转到了最前面，why? 查文档MDN，textarea元素存在selectionEnd和selectionStart的属性用来表示选中的文本开始位置和结束位置，DOM接口实例是htmlTextAreaElement， 它具有setSelectionRange方法，用来选中输入框中的文本，用法： TextAreaElement.setSelectionRange(selectionStart, se...
textarea的自适应高度
weixin_59787755的博客
03-15 1661
场景：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 ...
解决Layui 表格自适应高度的问题
10-16
4. **利用JavaScript动态计算高度**：如果内容高度变化不固定，可以使用JavaScript监听窗口大小变化或表格内容更新事件，动态计算并设置表格的高度。Layui 提供了 `layui.table.resize()` 方法来重新调整表格尺寸。 ...
固定textarea文本域尺寸
04-17
textarea元素在chrome等浏览器下可以被拖拉从而改变大小，对于查看textarea里面的内容来说相当方便,但是有时候,我们为了保持网页的美观，不得不想要禁掉这个功能，禁止用户随意拉动textarea的大小
textarea 高度自适应细节展示
w_shuhua的博客
03-06 482
textarea 高度自适应细节展示 用 textarea 实现输入框，在用户输入时，设置输入框的高度为 auto 然后取出输入框的 scrollHeight ，这个属性是指，在不出现滚动条的情况下把元素的内容(包含 padding )全部显示出来的最小高度 最后重新设置输入框的高度为 scrollHeight 最后，会发现，当输入内容不满一行时，输入框会变高，这是因为 textarea 的 ro...
textarea自适应高度二——（设置隐藏div获取高度和仿element-ui组件）
weixin_44784401的博客
07-07 4530
textarea自适应高度二——（设置隐藏div获取高度和仿element-ui组件）
Element ui设置文本域textarea高度，不可鼠标拖拉
最新发布
weixin_54514048的博客
04-08 1334
autosize="{minRows:2,maxRows:8} -->高度范围。resize='none' 文本域鼠标不可拖拉设置。autosize -->文本域高度自适应。:rows="2" -->固定行数。
css设置textarea宽高,textarea自动调整高宽
weixin_42709044的博客
08-04 3401
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 8942
大家好，我是前端队长Daotin，想要获取更多前端精彩内容，关注我(全网同名)，解锁前端成长新姿势。 以下正文： textarea使我们常用的表单元素。一般用于多行文字的输入。在绝大多数情况下，都可以满足我们的要求。 但是它有一个缺点是，它的高度是固定了，如果文本内容超出了它设定的高度时，就会显示出丑陋的滚动条。 然后有些时候，为了用户体验，我们需要让它的高度随着文本内容的高度而动态变化。 最经...
文本域(textarea)的高度自适应实现两法
lzhw1985的专栏
08-29 362
随着HTML5的即将退出，相信大家对页面更加人性化有了一定的期待，这里我介绍两种方法，让你的textarea能够实现根据内容自动调整高度，让你的页面也炫起来！ 方法一，使用JS自动调整 &lt;textarea name="mytextarea" cols="80" style="overflow-y:hidden;height:80px;" onpropertychange...
用JS scrollHeight方法实现textarea输入高度自适应的方法
lucyyang2008的博客
09-16 4773
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
1. width和height：设置文本域的宽度和高度。 2. font-size：设置文本域中字体的大小。 3. font-family：设置文本域中字体的类型。 4. color：设置文本域中字体的颜色。 5. background-color：设置文本域的背景...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值