文本框监听事件blur()的简单使用
场景描述:在做编辑功能的时候,经常要判断编码,或者密码之类的是否已经被使用,以前自己做的时候,经常都是在提交了之后才判断的,到现在,才发现,这样做的用户体验不好,完美一点的做法就是当此文本框失去焦点的时候,就直接给出提示,通过blur()来实现,上代码
代码:
//html代码
<input type="text" id="code" name="code"/>
//js代码
$("#code").blur(function () { // 监听文本框事件,判断编码是否存在
searchCode();
}); function searchCode() {
var code = $("#code").val();
var url = rootPath + "/vrx/xxx/searchCode";
var result = CommnUtil.ajax(url, {'code': code}, "json");
if (result == "true") {
layer.msg("编码已经存在,请重新输入!");
return "true";
} else if (result == "fail") {
layer.msg("查询编码失败,后台系统错误!");
} else if (result == "false") {
return "false";
}
return "fail";
}
后台代码就不写了,这是返回“true” "false" "fail" 字符串的,自己动手写吧
总结:以后对自己要求不能仅仅是完成功能,而应该贴近用户的体验,最了解产品模块的,不是产品经理,而是developer本身吧!
文本框监听事件blur()的简单使用的更多相关文章
- IE浏览器的脚本文本框监听事件
一.IE8的文本框监听事件 由于在IE8所以input和propertychange都不能用,终于皇天不负有心人让我找到了这个:https://github.com/sophiebits/jquery ...
- jquery实时监听某个文本框的输入事件
想给页面的的一个文本框添加监听事件 $(function(){ //页面加载完毕后触发事件 $("textarea[name='content']").bind('input pr ...
- UI设计篇·入门篇·简单动画的实现,透明动画/旋转动画/移动动画/缩放动画,混合动画效果的实现,为动画设置监听事件,自定义动画的方法
基本的动画构成共有四种:透明动画/旋转动画/移动动画/缩放动画. 配置动画的方式有两种,一种是直接使用代码来配置动画效果,另一种是使用xml文档配置动画效果 相比而言,用xml文档写出来的动画效果,写 ...
- JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件
JS: document.getElementById("input对象的ID").addEventListener('input',function(){ console.log ...
- jquery监听事件on写法以及简单的拖拽效果
引子——关于jquery的某些写法 我先不对监听事件做解释,我们先来看下jquery的一些写法吧!我们最常用的是jquery的css()方法,相信大家都会用! 假如用css设置一个属性,我们写法如下: ...
- jquery中,使用append增加元素时,该元素的绑定监听事件失效
举例:如果在一个<div id="resultArea"></div>中,通过append添加一个id="checkOutTip"的文本 ...
- JAVA JComboBox的监听事件(ActionListener、ItemListener)
版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 参考资料: http://263229365.iteye.com/blog/1040329 https://www.ja ...
- Android——监听事件总结
各种监听事件 1.按钮 Button(1)点击监听 btn_1.setOnClickListener(new View.OnClickListener() { (2)长按监听 btn_1.setOnL ...
- DOM初体验(绑定事件,监听事件)
JavaScript的组成: ECMAScript(js的基本语法).DOM(文档对象模型).BOM(浏览器对象模型) DOM的作用: 1. 找到页面上的元素 2. 增添.删除.修改页面上的元素 3. ...
随机推荐
- Java的selenium代码随笔(2)
import java.awt.AWTException;import java.awt.Robot;import java.awt.Toolkit;import java.awt.datatrans ...
- Android艺术——探究Handler运行机制
我们从开发的角度来说,Handler是Android 的消息机制的上层接口.说到Handler,大家都会说:哦,Handler这个我知道干什么的,更新UI.没错,Handler的确是用于更新UI的,具 ...
- Spring生命周期 Constructor > @PostConstruct > InitializingBean > init-method
项目中用到了 afterPropertiesSet: 于是具体的查了一下到底afterPropertiesSet到底是什么时候执行的.为什么一定要实现 InitializingBean; **/ @C ...
- python 基础篇练习题
一.练习题 # 1.统计元组中所有数据属于字符串的个数,提示:isinstance() # 数据:t1 = (1, 2, '3', '4', 5, '6') # 结果:3 # 2.将以下数据存储为字典 ...
- Windows Server 2016激活方法+密钥+遇到的问题及解决办法(摘抄)
Windows Server 2016激活方法+密钥+遇到的问题及解决办法 2018年08月30日 13:47:34 Brozer 阅读数:28667 这两天公司准备部署Revit Server ...
- C#、Java和JS实现SHA256+BASE64加密总结
C#.Java和JS实现SHA256+BASE64加密总结 --莫非(www.muphy.me) 原理 首先,通过编码格式(UTF-8.ASCII等,如果含有汉字等字符,编码格式不同加密结果也不同)获 ...
- React Native——react-navigation的使用
在 React Native 中,官方已经推荐使用 react-navigation 来实现各个界面的跳转和不同板块的切换. react-navigation 主要包括三个组件: StackNavig ...
- 一文入门NodeJS
NodeJS¶ 1.环境配置¶ 之前讲ES6的时候有提过一部分Node的知识,简单回顾下:一文读懂ES6 1.1.NPM国内镜像¶ npm国内镜像:https://npm.taobao.org 配 ...
- 洛谷P3205 [HNOI2011]合唱队 DP
原题链接点这里 今天在课上听到了这个题,听完后觉得对于一道\(DP\)题目来说,好的状态定义就意味着一切啊! 来看题: 题目描述 为了在即将到来的晚会上有更好的演出效果,作为AAA合唱队负责人的小A需 ...
- Vue(小案例_vue+axios仿手机app)_购物车
一.前言 1.购物车 二.主要内容 1.效果演示如下,当我们选择商品数量改变的时候,也要让购物车里面的数据改变 2.具体实现 (1)小球从上面跳到下面的效果 (2)当点击上面的“加入购物车按钮”让小球 ...