jquery绑定input的change事件
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');
}
});
jquery绑定input的change事件的更多相关文章
- 关于解决JQUERY对INPUT元素Change事件不兼容的问题
最近开发一个项目,需要实现用户在WEB表单里的多个INPUT框中输入数量后,立即自动计算加总各项输入的数量之和,并显示在指定的INPUT框中,这个功能实现的原理是简单的,就是只需要在INPUT的onc ...
- jquery监听动态添加的input的change事件
使用下面方法在监听普通的input的change事件正常 $('#pp').on('change', 'input.videos_poster_input', function () { consol ...
- 复选框 省市区 联动(监听input的change事件)
需求:省市区三级包含复选框按钮以及文字描述.点击文字显示对应的下级地区,点击复选框选择对应的下级区域勾选. 分析:监听input的change事件当点击复选框省 选择对应的第一个市区,同时默认选中第 ...
- 单选框radio改变事件详解(用的jquery的radio的change事件)
单选框radio改变事件详解(用的jquery的radio的change事件) 一.总结 1.用的jquery的radio的change事件:当元素的值发生改变时,会发生 change 事件,radi ...
- jQuery input -> file change事件bug
由jQuery绑定类型为file的input控件的change事件,发现只能被触发一次,修改方法 --> 原始代码: $input.change(function() { // somethin ...
- 关于webuploader 在ie9上不能触发 input 的 change 事件
上传文件用了 webuploader,ie9以上及其它浏览器正常执行js ,但是在ie9上点击input 无效,不能触发change 事件. 第一反应是ie9 需要使用flash 上传文件 原因: . ...
- input 输入框 change 事件和 blur 事件
输入框的 change 和 blur 事件绝大多数情况下表现是一致的,输入结束后离开输入框会先后触发 change 和 blur.那么这两个事件的区别在哪呢? 当文本框获得焦点后,没有输入任何内容, ...
- 轉:Jquery绑定img的click事件
用JQUERY给IMG element绑定click事件的时候,直接用img.click(function(){...})不起作用,如下面代码$("img.ms-rteImage-Light ...
- jquery操作select标签change事件
$('#update_supply_id').on('change',function(){//判断是否选取prompt属性,无返回值: if($(this).val()){ var selectTe ...
随机推荐
- python快捷键的使用【摘抄】
接触python有些快捷键还不熟悉,搜索到下面这个文章很好的转发和摘抄了,感谢作者的用心分析 摘抄来源:https://www.cnblogs.com/haiyan123/p/7170593.html ...
- vue的学习--如何使用Intellij IDEA配置并运行vue项目
重新接触vue,开始学习使用IDE对vue项目进行配置和运行项目. 1.前面的准备 一般的教程都能到通过命令行运行npm run dev,并通过结果显示的端口,用浏览器访问自己的vue项目的结果.但是 ...
- Tkinter 之主窗口参数
一.常用参数 语法 作用 window= tk.TK() 创建窗口 window['height'] = 300 设置高 window['width'] = 500 设置宽 window.title( ...
- C语言结构体笔记
typedef给结构起别名 可以是匿名结构或者普通的结构,方便后面使用. #include<stdio.h> typedef struct{ //匿名结构 float tank_capac ...
- spring boot 之 如何创建spring boot项目
创建spring boot的方式有非常多,今天我们使用maven来进行创建spring boot项目,因为maven使用的非常广泛,也很好用,很多IDE也都支持maven. 1 创建maven项目 1 ...
- JavaScript数字精度丢失的一些问题
本文分为三个部分 JS 数字精度丢失的一些典型问题 JS 数字精度丢失的原因 解决方案(一个对象+一个函数) 一.JS数字精度丢失的一些典型问题 1. 两个简单的浮点数相加 1 0.1 + 0.2 ! ...
- SQLite3中的日期时间函数使用小结
代码如下: import sqlite3conn = sqlite3.connect('/tmp/sqlite.db')cur = conn.cursor() 接下来干嘛呢?建一张表吧.这里需要注意的 ...
- Java-编程规范与代码风格
阿里巴巴 Java 开发手册 https://github.com/alibaba/p3c https://developer.aliyun.com/special/tech-java 唯品会规范 J ...
- nodejs取参四种方法 req.body, req.params, req.param, req.body
获取请求很中的参数是每个web后台处理的必经之路,nodejs的 express框架 提供了四种方法来实现. req.body req.query req.params req.param() 首先介 ...
- nineoldandroids开源库
Android3.0 推出AnimationAPI ,使用起来比较方便,但是不能再3.0以下版本中使用.nineoldandroids开源库可以在任意版本上使用,官网地址:http://nineold ...