jquery绑定input的change事件

最新推荐文章于 2024-03-19 10:28:51 发布

转载最新推荐文章于 2024-03-19 10:28:51 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/alisleepy/p/11200329.html

文章标签：

#javascript #ViewUI

本文探讨了在登录页面中使用jQuery实现input元素的change事件和input事件的区别。change事件在用户完成输入并离开输入框时触发，而input事件则在用户输入内容发生改变时立即触发，适用于实时监测输入框值的变化。

### jquery绑定input的change事件

背景：在做一个登录页时，如果用户未输入验证码则无法点击登录按钮，所以想到了用input的change事件，但是在写完后发现无法监听input值的改变。

解决办法：改为了input事件

input的change事件（相当于blur事件）

用户在输入完成后失去焦点才会触发，不能实时监听输入框值的变化，相当于blur事件

//这种情况就是在输入完成后失去焦点才能触发
$('input[name="h5logincode"]').on('change', function(){
    var _this = $(this);
    if(_this.val().length > 0){
        $('.sub').css('background-color', '#FFBC45');
        $('.sub').attr('disabled', false);
    }else{
        $('.sub').attr('disabled', true);
        $('.sub').css('background-color', '#b0aeae');
    }
});

input的input事件

用户输入的内容改变时触发，相当于实时监听

//验证码输入后登录按钮启用
$('input[name="h5logincode"]').on('input', function(){
    var _this = $(this);
    if(_this.val().length > 0){
        $('.sub').css('background-color', '#FFBC45');
        $('.sub').attr('disabled', false);
    }else{
        $('.sub').attr('disabled', true);
        $('.sub').css('background-color', '#b0aeae');
    }
});

转载于:https://www.cnblogs.com/alisleepy/p/11200329.html