input textarea監聽鼠標粘貼

時間 2019-11-05

標籤 input textarea 監聽鼠標粘貼简体版

原文原文鏈接

發現一個問題，在input/textarea中若是是鼠標粘貼內容進去，發現判斷不了value的改變，html代碼以下： javascript

<!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） html

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改變值時不會觸發，自動下拉框選值時不會觸發，代碼以下： java

function bindChangeHandler(input,fun) {
    if("onpropertychange" in input) {//IE六、七、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);
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。