场景描述:在做编辑功能的时候,经常要判断编码,或者密码之类的是否已经被使用,以前自己做的时候,经常都是在提交了之后才判断的,到现在,才发现,这样做的用户体验不好,完美一点的做法就是当此文本框失去焦点的时候,就直接给出提示,通过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()的简单使用的更多相关文章

  1. IE浏览器的脚本文本框监听事件

    一.IE8的文本框监听事件 由于在IE8所以input和propertychange都不能用,终于皇天不负有心人让我找到了这个:https://github.com/sophiebits/jquery ...

  2. jquery实时监听某个文本框的输入事件

    想给页面的的一个文本框添加监听事件 $(function(){ //页面加载完毕后触发事件 $("textarea[name='content']").bind('input pr ...

  3. UI设计篇·入门篇·简单动画的实现,透明动画/旋转动画/移动动画/缩放动画,混合动画效果的实现,为动画设置监听事件,自定义动画的方法

    基本的动画构成共有四种:透明动画/旋转动画/移动动画/缩放动画. 配置动画的方式有两种,一种是直接使用代码来配置动画效果,另一种是使用xml文档配置动画效果 相比而言,用xml文档写出来的动画效果,写 ...

  4. JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件

    JS: document.getElementById("input对象的ID").addEventListener('input',function(){ console.log ...

  5. jquery监听事件on写法以及简单的拖拽效果

    引子——关于jquery的某些写法 我先不对监听事件做解释,我们先来看下jquery的一些写法吧!我们最常用的是jquery的css()方法,相信大家都会用! 假如用css设置一个属性,我们写法如下: ...

  6. jquery中,使用append增加元素时,该元素的绑定监听事件失效

    举例:如果在一个<div id="resultArea"></div>中,通过append添加一个id="checkOutTip"的文本 ...

  7. JAVA JComboBox的监听事件(ActionListener、ItemListener)

    版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[+]   参考资料: http://263229365.iteye.com/blog/1040329 https://www.ja ...

  8. Android——监听事件总结

    各种监听事件 1.按钮 Button(1)点击监听 btn_1.setOnClickListener(new View.OnClickListener() { (2)长按监听 btn_1.setOnL ...

  9. DOM初体验(绑定事件,监听事件)

    JavaScript的组成: ECMAScript(js的基本语法).DOM(文档对象模型).BOM(浏览器对象模型) DOM的作用: 1. 找到页面上的元素 2. 增添.删除.修改页面上的元素 3. ...

随机推荐

  1. Java的selenium代码随笔(3)

    /** 以下方法主要用于切换页面*/public void SetPageSwitch(String pageTitle) {Set<String> allWindowsHandles = ...

  2. JDBC数据库连接池之dbcp

    一.连接池的作用 数据库的连接是一种很重要的资源,如果一个项目比较小,连接数据库的次数比较少,我们可以采取直连的方式:“获取连接----使用----关闭连接”.但是如果一个网站访问量很大,假如同时有几 ...

  3. kettle查询

    >流查询: 1.转换设计 2.主数据 3.查询数据 4.流查询 5.数据预览 查询中有重复数据默认获取最后一条:查询数据中有重复数据,默认获取到了最后一条数据. 主数据中无匹配数据则在结果集中返 ...

  4. Lua语言自学之01.基础概念的理解

    编程不只是这么简单,它的思维是理性的编程思维,操纵机器干事本来就不是一件简单的事,要干什么,该怎么做,怎么做得才好. 脚本的概念在程序中十分重要,在游戏开发领域,它更是决定性的.脚本语言让程序员可以区 ...

  5. radio,check美化

    单选框与复选框原生控件美化有多种解决方案,现在采用经典的input+label的方式自己实现一种 思路: input 和label 通过id和for属性关联,点击label时,input选中状态改变 ...

  6. 记录一次Oracle注入绕waf

    这个注入挺特殊的,是ip头注入.我们进行简单的探测: 首先正常发起一次请求,我们发现content-type是76 探测注入我习惯性的一个单引号: 一个单引号我发现长度还是76 我开始尝试单引号,双引 ...

  7. spring boot junit controller

    MockMvc 来自Spring Test,它允许您通过一组方便的builder类向 DispatcherServlet 发送HTTP请求,并对结果作出断言.请注意,@AutoConfigureMoc ...

  8. 2017-12-19python全栈9期第四天第二节之列表的增删查改之删除的pop和del和remove和clear

    #!/user/bin/python# -*- coding:utf-8 -*-li = ['zs','ls','ww','zl']# name = li.pop(1) #按索引位置删除有返回值# n ...

  9. Numpy系列(二)- 数据类型

    Numpy 中的数组比 Python 原生中的数组(只支持整数类型与浮点类型)强大的一点就是它支持更多的数据类型. 基本数据类型 numpy常见的数据类型 数据类型 描述 bool_ 布尔(True或 ...

  10. CMDB资产管理系统开发【day26】:实现资产自动更新

    1.需求分析 1.比对分析 比对的时候以那个数据源为主? old [1,2,3 ] db数据库 new [2,3,4 ] 客户端汇报过来的 当然以客户端汇报过来的数据为主 2.更新分析 不同的表到底拿 ...