文本输入框自适应高度

原创 2015年07月07日 13:56:26
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <HTML>

    <HEAD>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <TITLE>文本框textarea高度自适应增长/伸缩</TITLE>
    </HEAD>

    <BODY>
        <textarea id="txtContent1" rows="5" cols="50" onkeyup="ResizeTextarea(1)" style="overflow-y:hidden;resize: none;">Textarea高度随内容自适应地增长,无滚动条
        </textarea>
        <script type="text/javascript">
             // 最小高度
            var minRows = 5;
             // 最大高度,超过则出现滚动条
            var maxRows = 60;

            function ResizeTextarea(index) {
                var t = document.getElementById('txtContent' + index);
                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>

自增前:


自增后:


基于JQ 根据输入内容自适应输入框高度 支持输入增高 渲染时设置高度和内容一致

// 调用方法bootText('textarea', 50) // 第一个参数是class 或者 id 第二个参数是这个class或者id对象的最小高度function bootText(cls...
  • qq_37540004
  • qq_37540004
  • 2017年06月28日 22:48
  • 282

自适应高度文本框

自适应高度文本框,没有滚动条,并且随内容多少自动变换高度,美观方便。...
  • u010688587
  • u010688587
  • 2015年08月28日 01:48
  • 1116

textarea如何实现高度自适应?

转自:http://www.xuanfengge.com/textarea-on-how-to-achieve-a-high-degree-of-adaptive.html 今天需要...
  • tianyitianyi1
  • tianyitianyi1
  • 2015年11月19日 09:16
  • 25561

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

文章来源:http://www.cnblogs.com/jice/archive/2011/08/07/2130069.html textarea宽度、高度自动适应处理方法 .commen...
  • domingoluis
  • domingoluis
  • 2011年08月10日 16:45
  • 79993

自适应高度文本框

自适应高度文本框,没有滚动条,并且随内容多少自动变换高度,美观方便。...
  • u010688587
  • u010688587
  • 2015年08月28日 01:48
  • 1116

基于JQ 根据输入内容自适应输入框高度 支持输入增高 渲染时设置高度和内容一致

// 调用方法bootText('textarea', 50) // 第一个参数是class 或者 id 第二个参数是这个class或者id对象的最小高度function bootText(cls...
  • qq_37540004
  • qq_37540004
  • 2017年06月28日 22:48
  • 282

Android EdiText超出设定高度自适应

虽然我还是个菜鸟,但是问这问题还被人取笑,感觉蓝瘦香菇鱼焖~~ 所以,写了这篇来避免大家入坑 其实,确实也很简单,只需要在布局设定EditText的最小高度为你想设定的值大小,然后设定发高为自适应就行...
  • Androidtalent
  • Androidtalent
  • 2016年10月25日 12:06
  • 1739

UITextField输入框响应键盘的弹出做高度的自适应

iOS开发中,注册登录页面可以说是必不可少的,我们经常遇到的问题无非就是键盘弹出之后遮住了输入框。所以我们要在键盘弹出或收回的同时调节输入框的高度,进而解决键盘遮住输入框的问题!!!...
  • qq_22026331
  • qq_22026331
  • 2016年06月30日 09:55
  • 2405

IOS textField、textView输入框的自适应

在用户填写一些相关内容时
  • kevinSnip
  • kevinSnip
  • 2014年10月09日 19:40
  • 1384

textarea如何实现高度自适应?

转自:http://www.xuanfengge.com/textarea-on-how-to-achieve-a-high-degree-of-adaptive.html 今天需要...
  • tianyitianyi1
  • tianyitianyi1
  • 2015年11月19日 09:16
  • 25561
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:文本输入框自适应高度
举报原因:
原因补充:

(最多只允许输入30个字)