【原】相煎何太急——input的blur事件与button的click事件
2016-01-21 17:01
351 查看
先来一段引子,最近在写手机h5页面,主要是一些登陆注册方面的,最绕不开的就是表单元素。
我想实现的是:在输入框后边有一个删除图标,当输入东西的时候触发事件,显示删除图标,点击该图标会删除之前输入的内容,离开输入框,该图标消失。
之前的预想是:为输入框添加focus和blur事件;
但是遇到了问题:当我输入后点击删除图标,同时也触发了blur事件,此时图标消失,也就点击不到图标了,但是如果不在blur时让图标消失,则每一次输入完成后input失去焦点,图标就一直显示着。
这个问题向个梗,一直卡着,直到今天。。。我又遇到了另外一个问题!!
问题描述:当我在输入框输入完内容后,直接点击注册按钮,第一次点击,没反应,每一次都是焦点在input时点击button,需要点击两次,button才会有所反应;
这时我才意识到,这是blur抢占了click的风头,那么我就得去blur里找问题,果然,如果我给blur的执行加一个延时....
万事大吉,一下子世界都安静了。。。
然后就没有然后了,连之前的删除小图标也听话了,一blur就能隐藏,可是我的js代码重复代码非常之多,如下:
并且,我甚至都不知道第一个问题是怎么被解决的,在此也想向大家请教一下,为什么加一个定时之后,我再用$(this)就取不到当前的对象,必须得像$("#person")这样重新取,导致我还得为每一个input添加一个blur事件,不能集中处理,或者,其实这段代码是可以简化的,只是我还没想到。。。还请各方同学多多指教。
本文原创,转载请注明出处。
我想实现的是:在输入框后边有一个删除图标,当输入东西的时候触发事件,显示删除图标,点击该图标会删除之前输入的内容,离开输入框,该图标消失。
<div class="wrapper"> <div class="count"> <label for="person">手机号</label> <input id="person" type="text" placeholder="请输入手机号"> <i class="r btn_delete delete1"><img src="../imgs/btn_Eliminate.png"></i> </div> <div class="count"> <label for="pwd">密 码</label> <input id="pwd" type="text" placeholder="6-18位,建议数字、字母、符号组合"> <i class="r btn_delete delete2"><img src="../imgs/btn_Eliminate.png"></i> <i class="r hide_switch"><img src="../imgs/btn_display_switch.png"></i> </div> <div class="confirm"> <label for="msg">短信验证码</label> <input id="msg" type="text" placeholder="请输入短信验证码"> <i class="r btn_delete delete3"><img src="../imgs/btn_Eliminate.png"></i> <button class="r receive_msg">获取验证码</button> </div> </div> <div class="log"> <button class="btn_register">立即注册</button> </div>
之前的预想是:为输入框添加focus和blur事件;
$("#person, #modify_name").focus(function(event) { event.preventDefault(); $(this).prev().css("color", "#f68121"); if ($(this).val() === person_val) { $(this).val("").css("color", "#000").keyup(function() { $(".btn_delete").css("visibility", "visible").bind("click", function(event) { event.preventDefault(); $("#person").val("").focus(); $(".btn_delete").css("visibility", "hidden"); }); }); } }); $("#person, modify_name").blur(function(event) { event.preventDefault(); //$(".btn_delete").css("visibility", "hidden"); $(this).prev().css("color", "#000"); if ($(this).val() === "") { $(this).css("color", "#acacac").val(person_val); } });
但是遇到了问题:当我输入后点击删除图标,同时也触发了blur事件,此时图标消失,也就点击不到图标了,但是如果不在blur时让图标消失,则每一次输入完成后input失去焦点,图标就一直显示着。
这个问题向个梗,一直卡着,直到今天。。。我又遇到了另外一个问题!!
问题描述:当我在输入框输入完内容后,直接点击注册按钮,第一次点击,没反应,每一次都是焦点在input时点击button,需要点击两次,button才会有所反应;
这时我才意识到,这是blur抢占了click的风头,那么我就得去blur里找问题,果然,如果我给blur的执行加一个延时....
$("#person, #pwd, #msg, #mail").focus(function(event) { event.preventDefault(); if ($(this).attr("placeholder") === person_plc) { that = $(this); } else if ($(this).attr("placeholder") === pwd_plc) { that = $(this); } else { that = $(this); } that.prev().css("color", "#f68121"); that.css("color", "#000").keyup(function() { that.next(".btn_delete").css("visibility", "visible").bind("click", function(event) { $(this).prev().css("color", "#acacac").val("").blur().prev().css("color", "#000"); $(".btn_delete").css("visibility", "hidden"); }); }); }) $("#person").blur(function(event) { event.preventDefault(); setTimeout(function() { // console.log("blur"); $(".btn_delete").css("visibility", "hidden"); $("#person").prev().css("color", "#000"); if ($("#person").val() === "") { $("#person").css("color", "#acacac"); } }, 100); });
万事大吉,一下子世界都安静了。。。
然后就没有然后了,连之前的删除小图标也听话了,一blur就能隐藏,可是我的js代码重复代码非常之多,如下:
var person_val = $("#person").val();
var person_plc = $("#person").attr("placeholder");
var pwd_plc = $("#pwd").attr("placeholder");
var that;
$("#person, #pwd, #msg, #mail").focus(function(event) { event.preventDefault(); if ($(this).attr("placeholder") === person_plc) { that = $(this); } else if ($(this).attr("placeholder") === pwd_plc) { that = $(this); } else { that = $(this); } that.prev().css("color", "#f68121"); that.css("color", "#000").keyup(function() { that.next(".btn_delete").css("visibility", "visible").bind("click", function(event) { $(this).prev().css("color", "#acacac").val("").blur().prev().css("color", "#000"); $(".btn_delete").css("visibility", "hidden"); }); }); }) $("#person").blur(function(event) { event.preventDefault(); setTimeout(function() { // console.log("blur"); $(".btn_delete").css("visibility", "hidden"); $("#person").prev().css("color", "#000"); if ($("#person").val() === "") { $("#person").css("color", "#acacac"); } }, 100); });
$("#pwd").blur(function(event) {
event.preventDefault();
setTimeout(function() {
// console.log("blur");
$(".btn_delete").css("visibility", "hidden");
$("#pwd").prev().css("color", "#000");
if ($("#pwd").val() === "") {
$("#pwd").css("color", "#acacac");
}
}, 100);
});
$("#msg").blur(function(event) {
event.preventDefault();
setTimeout(function() {
// console.log("blur");
$(".btn_delete").css("visibility", "hidden");
$("#msg").prev().css("color", "#000");
if ($("#msg").val() === "") {
$("#msg").css("color", "#acacac");
}
}, 100);
});
并且,我甚至都不知道第一个问题是怎么被解决的,在此也想向大家请教一下,为什么加一个定时之后,我再用$(this)就取不到当前的对象,必须得像$("#person")这样重新取,导致我还得为每一个input添加一个blur事件,不能集中处理,或者,其实这段代码是可以简化的,只是我还没想到。。。还请各方同学多多指教。
本文原创,转载请注明出处。
相关文章推荐
- [ApiDemos] AlertDialog 使用和源码分析
- Citrix Storefront3.01Web界面自定义修改
- mac配置adb
- 将一个字符串复制到另一个字符串(用指针)
- CSS3阴影 box-shadow的使用和技巧总结
- java导出excel表
- SqlServer2008R几种服务的区别
- 数值的整数次方
- -----------什么是图?------------
- Android 平台语言对照表
- poi操作Excel
- 在Ubuntu上下载Android最新源代码
- CodeForces 589F Gourmet and Banquet 题解
- 如何将一个map 转换成json数据
- 图像特征
- c++ stl容器vector删除(erase),遍历等基本用法介绍及头文件
- JVM中的类加载原理
- LightOJ 1238 Power Puff Girls(BFS)
- 自定义Style
- dp题目列表