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

    import java.awt.AWTException;import java.awt.Robot;import java.awt.Toolkit;import java.awt.datatrans ...

  2. Android艺术——探究Handler运行机制

    我们从开发的角度来说,Handler是Android 的消息机制的上层接口.说到Handler,大家都会说:哦,Handler这个我知道干什么的,更新UI.没错,Handler的确是用于更新UI的,具 ...

  3. Spring生命周期 Constructor > @PostConstruct > InitializingBean > init-method

    项目中用到了 afterPropertiesSet: 于是具体的查了一下到底afterPropertiesSet到底是什么时候执行的.为什么一定要实现 InitializingBean; **/ @C ...

  4. python 基础篇练习题

    一.练习题 # 1.统计元组中所有数据属于字符串的个数,提示:isinstance() # 数据:t1 = (1, 2, '3', '4', 5, '6') # 结果:3 # 2.将以下数据存储为字典 ...

  5. Windows Server 2016激活方法+密钥+遇到的问题及解决办法(摘抄)

    Windows Server 2016激活方法+密钥+遇到的问题及解决办法 2018年08月30日 13:47:34 Brozer 阅读数:28667   这两天公司准备部署Revit Server ...

  6. C#、Java和JS实现SHA256+BASE64加密总结

    C#.Java和JS实现SHA256+BASE64加密总结 --莫非(www.muphy.me) 原理 首先,通过编码格式(UTF-8.ASCII等,如果含有汉字等字符,编码格式不同加密结果也不同)获 ...

  7. React Native——react-navigation的使用

    在 React Native 中,官方已经推荐使用 react-navigation 来实现各个界面的跳转和不同板块的切换. react-navigation 主要包括三个组件: StackNavig ...

  8. 一文入门NodeJS

      NodeJS¶ 1.环境配置¶ 之前讲ES6的时候有提过一部分Node的知识,简单回顾下:一文读懂ES6 1.1.NPM国内镜像¶ npm国内镜像:https://npm.taobao.org 配 ...

  9. 洛谷P3205 [HNOI2011]合唱队 DP

    原题链接点这里 今天在课上听到了这个题,听完后觉得对于一道\(DP\)题目来说,好的状态定义就意味着一切啊! 来看题: 题目描述 为了在即将到来的晚会上有更好的演出效果,作为AAA合唱队负责人的小A需 ...

  10. Vue(小案例_vue+axios仿手机app)_购物车

    一.前言 1.购物车 二.主要内容 1.效果演示如下,当我们选择商品数量改变的时候,也要让购物车里面的数据改变 2.具体实现 (1)小球从上面跳到下面的效果 (2)当点击上面的“加入购物车按钮”让小球 ...