善恶资源网专注优秀技术教程分享网-傅汉松!

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

傅汉松 技术教程

汉松出品|资源介绍

傅汉松本次为大家分享的是jq 监听 input textarea 的内容时时变化的方法

傅汉松

遇到了个使用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">
//feiniaomy.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事件:

此事件会在元素内容发生改变,且失去焦点的时候触发。

浏览器支持度较好。

2、onpropertychange事件:

此事件会在元素内容发生改变时立即触发,即便是通过js改变的内容也会触发此事件。

元素的任何属性改变都会触发该事件,不止是value。

只有IE11以下浏览器支持此事件。

3、oninput事件:

此事件会在value属性值发生改变时触发,通过js改变value属性值不会触发此事件。

只有IE8以上或者谷歌火狐等标准浏览器支持。


标签: 暂无标签

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:321976193@qq.com

同类推荐
评论列表

最新评论
推荐内容
热门文章
随机推荐
资源标签
技术教程 jq 监听 input textarea 的内容时时变化的方法
遇到了个使用jq监听 input 与 textarea 输入框内容时时变化的需求,虽然这个需求的实现很简单,但还是要记录下万一以后要用到呢。jq 监听 inpu...
扫描二维码阅读原文
QQ娱乐网 January, 01
生成社交图 ×
    80.25ms