成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

js監(jiān)聽input輸入框值的實時變化

msup / 1867人閱讀

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

*注:(1)&(2)為其他文章的說明~

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




2、使用原生js添加監(jiān)聽事件



3、使用jQuery方法綁定事件



在監(jiān)聽到 onpropertychange 事件后,可以使用 event 的 propertyName 屬性來獲取發(fā)生變化的屬性名稱,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);
}

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/86599.html

相關(guān)文章

  • HTML5 實時監(jiān)聽輸入框值變化

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

    QLQ 評論0 收藏0
  • HTML5 實時監(jiān)聽輸入框值變化

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

    宋華 評論0 收藏0
  • 動態(tài)監(jiān)聽輸入值的變化

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

    missonce 評論0 收藏0
  • vue雙向數(shù)據(jù)綁定原理

    摘要:什么是雙向數(shù)據(jù)綁定是一個框架,數(shù)據(jù)綁定簡單來說,就是當數(shù)據(jù)發(fā)生變化時,相應(yīng)的視圖會進行更新,當視圖更新時,數(shù)據(jù)也會跟著變化。 什么是雙向數(shù)據(jù)綁定?Vue是一個MVVM框架,數(shù)據(jù)綁定簡單來說,就是當數(shù)據(jù)發(fā)生變化時,相應(yīng)的視圖會進行更新,當視圖更新時,數(shù)據(jù)也會跟著變化。 實現(xiàn)數(shù)據(jù)綁定的方式大致有以下幾種: - 1、發(fā)布者-訂閱者模式(backbone.js) - 2、臟值檢查(angula...

    Yumenokanata 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<