js監聽input輸入框值的實時變化

msup 發布于2019-08-21 11:21 / 1863人閱讀

摘要：注為其他文章的說明在元素上同時綁定和事件例使用原生添加監聽事件為瀏覽器，感興趣的同學可以去搜下，據說是現有最流行的判斷瀏覽器的方法使用方法綁定事件在監聽到事件后，可以使用的屬性來獲取發生變化的屬性名稱，實例實例實例手機號碼分段顯示手機號輸入

*注：（1）&（2）為其他文章的說明~

1、在元素上同時綁定 oninput 和onporpertychanger事件
例：

2、使用原生js添加監聽事件

3、使用jQuery方法綁定事件

在監聽到 onpropertychange 事件后，可以使用 event 的 propertyName 屬性來獲取發生變化的屬性名稱，event.propertyName

實例1：

實例2：


$("#name").bind("input porpertychange",function(){
        var thisTxt=$("#name").val();
        $(this).siblings("p").html(thisTxt)
    })

實例3：

//手機號碼分段顯示
register.phonePropertychange = function() {
    _this = register;
    _input = $(this);
    var v = $(this).val();
    v = v.replace(new RegExp(/ /g),"");
    var v1 = v.slice(0,3);
    var v2 = v.slice(3,7);
    var v3 = v.slice(7,11);
    if(v2==""){
        _input.focus().val(v1);
    }else if(v3==""){
        _input.focus().val(v1+" "+v2);
    }else{
        _input.focus().val(v1+" "+v2+ " "+v3);
    };
 
    //手機號輸入完成字體顏色改變
    if (v.length === 11) {
        if(_this.regexpPhone(v)){
            _input.css("color","#000");
            $("#btnSendCode").addClass("c-26a949");
            _input.blur();;
        }else{
            layer.open({content: "手機號碼不正確，請重新輸入",time: 2, end:function(){
                _input.val("");
            }});
        }
    }else{
        _input.css("color","#26a949");
    }
}

//驗證手機號
register.regexpPhone = function(phone){
    return /^1[3|4|5|7|8]d{9}$/.test(phone);
}

GPU云服務器云服務器輸入框值用js校驗 js 監聽數據變化 js輸入框發生變化 js獲取input輸入數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86599.html

HTML5 實時監聽輸入框值變化

摘要：集合監聽輸入框內容變化的示例代碼如下使用的話，只需要同時綁定和兩個事件就可以了，示例代碼如下在網頁開發中經常會碰到需要動態監聽輸入框值變化的情況，如果使用 onkeydown、onkeypress、onkeyup 這個幾個鍵盤事件來監測的話，監聽不了右鍵的復制、剪貼和粘貼這些操作，處理組合快捷鍵也很麻煩。因此這篇文章向大家介紹一種完美的解決方案：結合html5標準事件 oninpu...

QLQ 2019-08-01 17:28 評論0 收藏0
HTML5 實時監聽輸入框值變化

摘要：集合監聽輸入框內容變化的示例代碼如下使用的話，只需要同時綁定和兩個事件就可以了，示例代碼如下在網頁開發中經常會碰到需要動態監聽輸入框值變化的情況，如果使用 onkeydown、onkeypress、onkeyup 這個幾個鍵盤事件來監測的話，監聽不了右鍵的復制、剪貼和粘貼這些操作，處理組合快捷鍵也很麻煩。因此這篇文章向大家介紹一種完美的解決方案：結合html5標準事件 oninpu...

宋華 2019-08-20 18:56 評論0 收藏0
動態監聽輸入框值的變化

摘要：以上事件是鍵盤事件，但是當使用作為監聽事件時，會發現一些復制粘貼等操作用不了。二輸入框事件和都是事件對象，當輸入框的值發生改變時觸發該事件。不同的是，是在值改變時立即觸發，而是在值改變后失去焦點才觸發，并且可以用在非輸入框中，如等。一、鍵盤事件 1.onkeydownonkeydown 事件會在用戶按下一個鍵盤按鍵時發生。2.onkeypress onkeypress 事件會在鍵盤按...

missonce 2019-08-26 11:58 評論0 收藏0
vue雙向數據綁定原理

摘要：什么是雙向數據綁定是一個框架，數據綁定簡單來說，就是當數據發生變化時，相應的視圖會進行更新，當視圖更新時，數據也會跟著變化。什么是雙向數據綁定？Vue是一個MVVM框架，數據綁定簡單來說，就是當數據發生變化時，相應的視圖會進行更新，當視圖更新時，數據也會跟著變化。實現數據綁定的方式大致有以下幾種： - 1、發布者-訂閱者模式（backbone.js） - 2、臟值檢查（angula...

Yumenokanata 2019-08-22 16:44 評論0 收藏0