hi,欢迎访问本站!
当前位置: 首页Web前端正文

jq监听input与textarea内容时时变化的方法

墨初 Web前端 755阅读

遇到了个使用jq监听 input 与 textarea 输入框内容时时变化的需求,虽然这个需求的实现很简单,但还是要记录下万一以后要用到呢。

jq 监听 input 与 textarea 内容时时变化的方法

例:

<!DOCTYPE html>
<html>
<head>
      <meta charset="UTF-8">
      <title>HTML editor</title>
      <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
      <style>
        textarea{
          width:600px;
          height: 450px;
        }
      </style>
</head>
<body>
<textarea name=""></textarea>
<input type="text" name="">
<br/>
<span id="mochu"></span>
<script>
    $('body').on('input propertychange','.texts,.inputtext',function(){
    $('#mochu').html('当前字数:'+$(this).val().length);
});
</script>
</body>
</html>

原生JS代码时时检测 input textarea 输入框变化

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" oninput="OnInput(event)" onpropertychange="OnPropChanged(event)" value="Text field" />
<div id="mochu"></div>
</body>
<script type="text/javascript">
    //73so.com
    function OnInput (event) {
        //打印内容的长度
        console.log(event.target.value.length);
    }
    function OnPropChanged (event) {
        //打印内容的长度
        if (event.propertyName.toLowerCase () == "value") {
            console.log(event.srcElement.value.length);
        }
    }
</script>
</html>

PS:补充知识

1、onchange事件:

(1)、元素内容变化以及失去焦点时出发此事件

(2)、浏览器支持度较好,推荐使用此事件。

2、onpropertychange事件:

(1)、内容发生改变会触发此事件,包括 js 动态改变内容

(2)、元素任何属性值被改变,都会触发此事件

(3)、IE11以下浏览器支持此事件

3、oninput事件:

(1)、手动改内容时会触发此事件,js改变内容无法触发此事件

(2)、IE8以上或谷歌火狐等标准浏览器支持。

声明:无特别说明,转载请标明本文来源!