监听textarea输入文本变化,让textarea高度自增长

原本textarea只有一行高,随着输入字数的增多,默认增长,通常会用在移动端产品输入上

使用oninput比onkeyup更适合手机端

<textarea id="txtContent" class="j_comment_in comment-input" rows="1" oninput="ResizeTextarea(‘txtContent‘)" style="overflow-y:hidden;" placeholder="我也说一句..."></textarea> 
//最小高度
var minRows = 1;
// 最大高度,超过则出现滚动条
var maxRows = 6;
function ResizeTextarea(id){
    var t = document.getElementById(id);
    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;
        }
    }
} 
时间: 2024-10-29 19:09:42

监听textarea输入文本变化,让textarea高度自增长的相关文章

实时监听input输入的变化(兼容主流浏览器)

遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firefox等现代浏览器的input有oninput这一属性,可以用三种方式使用它: 1,内嵌元素方式(属性编辑方式) <input id="test" oninput="console.log('input');" type="text" />

[转] 实时监听input输入的变化(兼容主流浏览器)

遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firefox等现代浏览器的input有oninput这一属性,可以用三种方式使用它: 1,内嵌元素方式(属性编辑方式) <input id="test" oninput="console.log('input');" type="text" />

js监听input输入字符变化

<p class="text-input"> <input type="text" id="username" autoComplete='off' maxlength="30"> <span class="js_limit"> <em>0</em>/<span>30</span> </span> </p&

实时监听input输入

oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发.oninput 事件在主流浏览器的兼容情况如下: 从上面表格可以看出,oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代,这个事件在用户界面改变或者使用脚本直接

Android基础入门教程——3.5 监听EditText的内容变化

Android基础入门教程--3.5 监听EditText的内容变化 标签(空格分隔): Android基础入门教程 本节引言: 在前面我们已经学过EditText控件了,本节来说下如何监听输入框的内容变化! 这个再实际开发中非常实用,另外,附带着说下如何实现EditText的密码可见 与不可见!好了,开始本节内容! 1.监听EditText的内容变化 由题可知,是基于监听的事件处理机制,好像前面的点击事件是OnClickListener,文本内容 变化的监听器则是:TextWatcher,我们

js 实时监听input中值变化

js 实时监听input中值变化 分类: Javascript2014-05-11 11:13 849人阅读 评论(0) 收藏 举报 [html] view plaincopyprint? <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS

ios 监听TextField中内容变化

本篇文章只为帮助跟多的人.适合初学者. 在这里我介绍3种监听UITextField的方法.并在最后写了一个小的demo 提供参考. -------请不要纠结小编的命名方式规不规范,一切只为共同学习,共同进步. @property (weak, nonatomic) IBOutlet UITextField *UserID; @property (weak, nonatomic) IBOutlet UITextField *Password; @property (weak, nonatomic)

android 监听网络状态的变化及实战

android 监听网络状态的变化及实际应用 转载请注明博客地址:http://blog.csdn.net/gdutxiaoxu/article/details/53008266 平时我们在请求错误的情况下,通常会进行处理一下,一般来说,主要分为两方面的错误 - 没有网络的错误 - 在有网络的情况下,我们客户端的错误或者服务器端的错误 今天这篇博客主要阐述以下问题 怎样监听网络状态的变化,包括是否打开WiFi,否打开数据网络,当前连接的网络是否可用 网络没有打开情况下的处理,如弹出对话框,跳转到

oninput和onpropertychange实时监听输入框值的变化

传统监听输入框的做法就是使用keyup.keydown.keypress,或者change事件来实现,但keyup.keydown.keypress事件是只要完成击键事件后就触发,不考虑输入框的值是否变化,也监听不了使用鼠标右键[剪贴]和[粘贴]这些操作,更监听不了使用JS动态改变值的变化.而change事件必须是焦点离开输入框后才触发,并不能实时监听.所以这几个事件来监听输入框值变化并不完美.ie浏览器(ie6-8)可以直接使用onpropertychange事件来实时监听(包括JS动态改变值