• input textarea监听鼠标粘贴


    发现一个问题,在input/textarea中如果是鼠标粘贴内容进去,发现判断不了value的改变,html代码如下:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>判断粘贴</title>
    <script type="text/javascript" src="../jquery.js"></script>
    </head>
    <body>
    <textarea name="" id="test" cols="30" rows="10"></textarea>
    </body>
    </html>

    我写的监听方法:(使用了jquery)

    var $test = $('#test');
    $test.on('keyup',function(){
      console.log('keyup__'+this.value);
    })
    .on('mouseup',function(){
      console.log('mouseup__'+this.value);
    })
    ;

    以上方法只能判断键盘的快捷键粘贴 如果是鼠标粘贴就失效了

    后面在网友Amin的帮助下,找到了一个兼容浏览器的方法(详情 http://dramin.duapp.com/?p=112

    主要是通过判断输入状态的改变,类似于onchange,IE9以上 、firefox、chrome等都支持了Html中的oninput事件,而IE6/7/8则可以通过onpropertychange事件来解决,但是IE6/7/8下如果input为disabled则事件无效,IE9+ FF opera11+,该事件用js改变值时不会触发,自动下拉框选值时不会触发,代码如下:

    function bindChangeHandler(input,fun) {
            if("onpropertychange" in input) {//IE6、7、8,属性为disable时不会被触发
                input.onpropertychange = function() {
                    if(window.event.propertyName == "value") {
                        if(fun) {
                            fun.call(this,window.event);
                        }
                    }
                }
            } else {
                //IE9+ FF opera11+,该事件用js改变值时不会触发,自动下拉框选值时不会触发
                input.addEventListener("input",fun,false);
            }
        }
    
        //使用
        bindChangeHandler($test[0],function(){
            alert(this.value);
        });

    问题解决了。

  • 相关阅读:
    PyTorch 60 分钟入门教程:数据并行处理
    调参侠的末日? Auto-Keras 自动搜索深度学习模型的网络架构和超参数
    图片格式在线转换
    非常好的Oracle教程
    符号大全
    图片在线生成
    奥比岛人物立绘
    Linux 下的分屏利器-tmux安装、原理及使用
    CentOS7 安装极点五笔输入法
    zabbix监控服务搭建
  • 原文地址:https://www.cnblogs.com/subying/p/input-change.html
Copyright © 2020-2023  润新知