Javascript----input事件实现动态监听textarea内容变化

1、代码

<!DOCTYPE html>
<html>

<head>
    <title>textarea输入文字监听</title>
</head>

<body>
    <textarea id=‘text‘ maxlength="50" style="width: 400px; height: 200px;"></textarea>
    <span id=‘sp‘></span>
    <script type="text/javascript">
    var val = document.getElementById("text");
    var tar = document.getElementById(‘sp‘);
    console.log(tar);

    val.addEventListener("input", function(e) {
        var t = this.value;
        console.log(t);
        if (t.length > 10) {
            e.returnValue = false;
        }
        tar.innerText = (50 - t.length);
    })
    </script>
</body>

</html>

2、效果

3、总结：比较textarea的几个事件，

a、onChange ：鼠标市区焦点的时候触发

b、onInput ： textarea内容改变的时候出发

c、通过监听键盘事件也是存在很多bug的，keyup存在当复制粘贴删除的时候

d、onpropertychange事件ie兼容性不好，can i you都没发找到兼容性信息，

时间： 2024-10-27 12:48:34

Javascript----input事件实现动态监听textarea内容变化的相关文章

JavaScript之事件概念和监听事件

1.事件的概念: JavaScript使我们有能力创建动态页面,网页中的每一个元素都可以产生某些触发JavaScript函数的事件.我们可以认为事件是可以被JavaScript侦测到的一种行为. 2.事件流: 事件流主要分为冒泡型事件和捕获型事件.IE浏览器目前只支持冒泡型事件,而支持标准DOM的浏览器比如火狐.Chrome等两者都支持. 3.使用返回值改变HTML元素的默认行为: HTML元素大都包含了自己的默认行为,例如:超链接.提交按钮等.我们可以通过在绑定事件中加上"return fal

JQuery如何监听DIV内容变化

技术需求: 当Div内容发生变化生,需要监听事件,并执行指定的方法. 代码分解: #wb_follow_btn 是Div的id DOMNodeInserted 绑定监听方法完整代码: $("#wb_follow_btn").bind('DOMNodeInserted', function(e) { alert('element now contains: ' + $(e.target).html()); });

JavaScript 使用HTML DOM的oninput事件，实时监听value值变化

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p>该实例演示了如何使用 addEventListener() 方法向 input 元素中添加 "oninput" 事件.</p> <p>

监听textarea数值变化

$('#id').bind('input propertychange', function(){ //TODO }); 原文地址:https://www.cnblogs.com/miaosj/p/10337711.html

利用DOMNodeInserted监听标签内容变化

input 即时搜索监听输入值的变化

在 Web 开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown.onkeypress.onkeyup 这个几个键盘事件来监测的话,监听不了右键的复制.剪贴和粘贴这些操作,处理组合快捷键也很麻烦.因此这篇文章向大家介绍一种完美的解决方案:结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化. oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:pa

实时监听输入框值变化：oninput & onpropertychange

html5 oninput实时监听输入框值变化的完美方案

在网页开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown.onkeypress.onkeyup 这个几个键盘事件来监测的话,监听不了右键的复制.剪贴和粘贴这些操作,处理组合快捷键也很麻烦.因此这篇文章向大家介绍一种完美的解决方案:结合html5标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化.,对于检测 textarea, input:text, input:password 和 input:search 这几个元素

实时监听输入框值变化的完美方案：oninput & onpropertychange

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