Question

input的onblur事件的疑问

我是设计的这样一个效果，当点击按钮后，显示一个div，div中有一个input控件和一个span按钮，当点击按钮的时候，若input的内容不为空，则value会通过ajax提交到指定页面，否则input中显示“搜索的内容不能为空”，并重新使input获得焦点，清除input中的提示。其中input控件失去焦点的时候，该div会延时隐藏。这是显示div的js代码：
jQuery(".search").click(function(){
jQuery(".box").fadeIn();
jQuery(".textarea").focus();
jQuery(".textarea").animate({margin:"1 0 0 -130px"});
jQuery(".searchbox").animate({margin:"0"});
jQuery(".searchbutton").animate({margin:"7px 0 0 100px"});
});
这是隐藏div的js代码：
jQuery(".textarea").blur(function(){
setTimeout(function(){
jQuery(".box").fadeOut();
jQuery(".textarea").animate({margin:"0 30 0 232px"});
jQuery(".searchbox").animate({margin:"0 236 0 0"});
jQuery(".searchbutton").animate({margin:"40 0 0 340"});
},1500)
});
这是ajax代码：
$(".searchbutton").click(function(){
var str = document.getElementById("textarea").value;
if(str != ""){
//ajax提交内容部分省略，功能正常，问题应该不在这里
}else{
document.getElementById("textarea").focus();
jQuery(".textarea").val("搜索内容不能为空")
setTimeout(function(){jQuery(".textarea").val("")},1000);
}
});
这是div的代码：
<li class = "box" id = "box">
<div class = "searchbox">
<input class = "textarea" id = "textarea">
<span class = "searchbutton" ></span>
</div>
</li>
问题1：当input中未输入内容的时候，点击按钮提交，input中出现提示文字，可是为何过了1秒钟后，div隐藏了。从浏览器运行效果上看，input确实是处于获得焦点的状态，可是js仍然执行了隐藏div的命令。这是哪里的问题？
问题2：当问题1发生后，重新点击“搜索”选项，div出现，input是获得焦点的状态，可是一秒钟后再次自动隐藏，始终无法使div保持显示状态；等经过十几秒钟后，再点击“搜索”选项，div恢复正常，保持了显示状态不再自动隐藏。这是什么原因？

Answer 1

第一个问题出在，onblur事件一直绑定着，因此只要你在输入框之外任何位置点击都会导致事件执行，就算你在searchbutton点击之后使输入框获得了焦点，可是事件代码已经执行了，所以到了时间就隐藏了。
因为click事件比blur事件晚执行，从而无法识别到是不是点击span按钮导致的blur。
解决方法：
1、把blur内的setTimeout返回值保存为int

2、$(".searchbutton").click执行时肯定触发了blur，click处理函数里把定时器int关掉clearTimeout(int)

第二个问题，很怪异，归根结底还是blur事件绑定的不合适，有事没事就被触发了，自己调试一下看看到底什么问题。

Answer 2

onchange虽然是控件值变化出发的事件，但前提是焦点离开该控件，如果焦点仍在控件上而值变化时，是不会触发的，也就是说，在焦点离开控件且值发生变化时，该事件触发onblur只要焦点离开就触发，不管值有没有变化至于两者哪个先执行，倒没有测试过，你可以试一下

Answer 3

请参考：http://jsfiddle.net/t84je/
问题根源在于点击$('.searchbutton')时，$('.textarea')触发了blur事件

追问

问题一我大概明白些，在点击的瞬间失去了焦点；那问题2呢？为何后面再次点击搜索选项，div窗口总是刚显示就马上隐藏了呢？

Answer 4

哎呀，问题这么长，我得看几次，本来书都看走神

追问

简单说就是js给input执行了获取焦点的命令，可是onblur仍然运行。我不知道是哪里写错了