Textarea高度随内容自适应地增长,无滚动条

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>枫芸志 » 文本框textarea高度自适应增长/伸缩</TITLE>
</HEAD>
<BODY>
    <textarea id="txtContent" rows="5" cols="50" onkeyup="ResizeTextarea()" style="overflow-y:hidden;">Textarea高度随内容自适应地增长,无滚动条
晴枫制作
http://www.111cn.net</textarea>
    <script type="text/javascript">
    // 最小高度
    var minRows = 5;
    // 最大高度,超过则出现滚动条
    var maxRows = 12;
 function ResizeTextarea(){
  var t = document.getElementById(‘txtContent‘);
  if (t.scrollTop == 0) t.scrollTop=1;
  while (t.scrollTop == 0){
   if (t.rows > minRows)
    t.rows--;
   else
    break;
   t.scrollTop = 1;
   if (t.rows < maxRows)
    t.style.overflowY = "hidden";
   if (t.scrollTop > 0){
    t.rows++;
    break;
   }
  }
  while(t.scrollTop > 0){
   if (t.rows < maxRows){
    t.rows++;
    if (t.scrollTop == 0) t.scrollTop=1;
   }
   else{
    t.style.overflowY = "auto";
    break;
   }
  }
 }
 </script>
</BODY>
</HTML>

  

时间: 2024-10-05 23:09:00

Textarea高度随内容自适应地增长,无滚动条的相关文章

jQuery实现textarea高度根据内容自适应

1 //jQuery实现textarea高度根据内容自适应 2 $.fn.extend({ 3 txtaAutoHeight: function () { 4 return this.each(function () { 5 var $this = $(this); 6 if (!$this.attr('initAttrH')) { 7 $this.attr('initAttrH', $this.outerHeight()); 8 } 9 setAutoHeight(this).on('inpu

左边label随着右边textarea高度自适应

左边label随着右边自适应 近期项目中,有表单需求 默认展示两列,当内容多的时候,可以展示一列 左边列 <div> <label>备注</label> <span>计算机</span> </div> 右边列 <div> <label>备注</label> <span>计算机</span> </div> 当右边有textarea的时候,让textarea高度随着内

实现textarea高度自适应内容,无滚动条

最近接触到一个很好用的js插件,可以实现textarea高度随内容增多而改变,并且不显示滚动条,推荐给大家: http://www.jacklmoore.com/autosize/

html5 textarea 文本框根据输入内容自适应高度

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文本框根据输入内容自适应高度</title> <style type="t

获取textarea文本框所选字符光标位置索引,以及选中的文本值;textarea高度自适应,随着内容增加高度增加;获取输入框中的光标位置

获取textarea文本框所选字符光标位置索引,以及选中的文本值 $.fn.selection = function () { var s, e, range, stored_range; if (this[0].selectionStart == undefined) { var selection = document.selection; if (this[0].tagName.toLowerCase() != "textarea") { var val = this.val()

textarea 高度自适应(chrome+ie8测试有效)

最近有一个需求,需要让textarea宽度不变,但是高度随着用户的输入高度自适应.由于浏览器版本的不兼容,很多方法通常只能在一个浏览器中起作用. 下面我写了一个小的demo,可以在chrome 和 ie8下正常使用,其他浏览器没有测试过. 第一种方式使用 js+css方式实现 <textarea rows='6' cols='100' style='overflow:scroll;overflow-y:visible;height:96px;width:679px;overflow-x:hidd

textarea文本域的高度随内容的变化而变化

用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条. CSS代码: 复制代码 代码如下: .t_area{ width:300px; overflow-y:visible } <textarea class="t_area"> 随便在这里输入内容,textarea的高度会随着你输入的内容而变化,不会出现滚动条,实现很简单,就是一段css:overflow-y:visible </textarea> 首先,原则上实现textarea自适应必须

textarea高度自适应

有时候写表单的时候,会有一个 备注框textarea.因为textarea不支持自适应高度,就是定好高度或者是行数之后,超出部分就会显示滚动条,看起来不美观.我们需要美观实现的效果:默认显示一行.当输入的文字超过一行或者输入Enter时,输入框的高度会随着改变,直到输入完毕.也就是要实现textarea的高度自适应 ========================================================= 方案A:用div来模拟textarea实现的,用CSS控制样式,不

父容器不根据内容自适应高度的解决方法

Div不根据内容自适应高度,我们看下面的代码: <div id="main"> <div id="content"></div> </div> 当Content内容多时,即使main设置了高度100%或auto.在不同浏览器下还是不能完好的自动伸展.内容的高度比较高了,但容器main的高度还是不能撑开. 我们可以通过三种方法来解决这个问题. 一,增加一个清除浮动,让父容器知道高度.请注意,清除浮动的容器中有一个空格.