js监听input输入框值的实时变化

msup 发布于2019-08-21 11:21 / 1820人阅读

摘要：注为其他文章的说明在元素上同时绑定和事件例使用原生添加监听事件为浏览器，感兴趣的同学可以去搜下，据说是现有最流行的判断浏览器的方法使用方法绑定事件在监听到事件后，可以使用的属性来获取发生变化的属性名称，实例实例实例手机号码分段显示手机号输入

*注：（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输入数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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