我有个文本框,输入文字的时候文本框下面会有自动完成相似的快捷导航....
重点在这里..我想在文本框的onblur事件里,把快捷导航隐藏掉, 这一步没有问题.
但是又必须要在快捷导航的点击事件里把选中的内容填写到文本框里..这个跟上面的onblur冲突了..
正好先触发文本框的onblur, 然后我的导航click事件无效了...
请问如何避免这个问题啊..
知道的请多多帮助,谢谢了.
重点在这里..我想在文本框的onblur事件里,把快捷导航隐藏掉, 这一步没有问题.
但是又必须要在快捷导航的点击事件里把选中的内容填写到文本框里..这个跟上面的onblur冲突了..
正好先触发文本框的onblur, 然后我的导航click事件无效了...
请问如何避免这个问题啊..
知道的请多多帮助,谢谢了.
<!--导航--->
<ul id="ulCardListQuick"></ul>第一:在txtTypeName的keyup事件里,我会自动搜索数据库显示相似内容....
第二:在导航里的li里面点击,我想把他点击的内容自动填写到文本框里.
第三:我想再txtTypeName的blur事件里隐藏掉导航,为什么要这样做呢,因为如果我在文本框里输入了内容,并且导航检索到了内容,如果我不点击导航的内容的话,那么导航一直存在,我需要隐藏它。
如果热心人还有不懂的话,加我QQ:1135110987。
综述:其实问题只有一个,就是txtTypeName的blur事件在ulCardListQuick的Click事件之前触发了!
我如果要他先Click,然后再Blur该怎么做?
1、导航click事件就隐藏;
2、0.5秒后,如果导航没有click ,就认为 焦点 到其他地方了,也隐藏导航。
就算了延迟onblur 也不行呃....
暂时没法子
导航上 有 "鼠标在上面移动" 的事件吗? 如果有就触发下,告诉"全局变量"鼠标在我头上,"鼠标走了后",告诉"全局变量"鼠标走了;
文本框onblur时,问"全局变量",鼠标在导航头上吗?
if 在:不隐藏导航
else :隐藏
鼠标在DIV区域时导航为可见。看看行不行,我不熟JS
对我来说得,上网查各种函数+调试n次大约一个下午的时间少壮不努力,老大徒伤悲啊现在用以致学了
我的意思是不需要用onblur来实现隐藏
直接去除掉onblur 事件
onchange方法根本不能做自动完成这个功能.
to zjc411:大家都是菜鸟,共勉之 !
调用ajax方法动态显示提示信息,
你输入的文字越多,
提示的信息就越精确。
然后我放弃onchange 用 onkeyup, 当然那个Ie的专用onpropertychange是可以的..
我想问onchange为什么我测试不能即时获得呢、
导航只有在 导航click ,或者导航失去焦点时 隐藏。
<html>
<head>
</head>
<body>
<input id="text1" type="text" onblur="textBlur()" /><br />
<a href="#" id="a1" onclick="aclick()">go to msdn</a>
</body>
</html><script>
var a1=document.getElementById("a1");
var text1=document.getElementById("text1");
text1.onblur=function()
{
setTimeout(textBlur,500);
}
function textBlur()
{
a1.style.display="none";
alert("text1 onblur");
}
function aclick()
{
alert("a1 click");
}
</script>
to jagland:我先看看你的代码。
感谢关注的,我正在工作,所以回复不是很及时,但是你们要相信,我的内心无时无刻不在感激你们。
思考问题就会明确逻辑边界问题,
并充分避免交集出现。
文本框 onkeyup事件 弹出导航菜单
文本框 onblur事件 隐藏导航菜单(延迟一小会)
导航菜单 onmouseover事件 文本框onblur事件失效
导航菜单 onclick事件 最终结果,隐藏导航菜单,文本框onblur事件恢复
导航菜单 onMouseOut事件 隐藏导航菜单,文本框onblur事件恢复
看看还有漏掉什么没有
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title> <script src="JS/jquery-1.4.min.js" type="text/javascript"></script> <style type="text/css">
.menu
{
float: left;
overflow: hidden;
width: 110px;
height: auto;
border: 1px solid #455765;
}
.menu ul
{
float: left;
margin: 0px;
padding: 0px;
}
.menu ul li
{
list-style-type: none;
margin: 2px auto;
width: 110px;
height: 30px;
}
.menu ul li a
{
display: block;
color: Black;
font-size: 12px;
width: 100%;
height: 22px;
line-height: 22px;
text-decoration: none;
text-align: center;
}
.menu ul li a:hover
{
background-color: #EAF9FF;
/*border: 3px double #455765;*/
text-decoration: none;
}
</style> <script type="text/javascript">
var clearSuggestionsTimer = false;
$(document).ready(function() {
$("#inputValue").bind("keyup", function() {
lookfor();
});
$(".menu").bind("mouseover", function() {
clearTimeout(clearSuggestionsTimer);
$("#inputValue").unbind("blur");
}).bind("mouseout", function() {
restTimeOut();
});
$(".menu ul li a").click(function() {
$("#inputValue").val($(this).html());
$(".menu").hide();
});
}); function lookfor() {
$(".menu").css({ "position": "absolute", "display": "block", "left": $("#inputValue").offset().left, "top": $("#inputValue").offset().top + $("#inputValue").height() + 10 });
$("#inputValue").bind("blur", function() {
restTimeOut();
});
} function restTimeOut() {
clearTimeout(clearSuggestionsTimer);
clearSuggestionsTimer = setTimeout(function() { $(".menu").hide(); }, 500);
}
</script></head>
<body>
<form id="form1" runat="server">
<input type="text" id="inputValue" />
<div class="menu" style="display: none;">
<ul>
<li><a href="#">图书借阅信息</a></li>
<li><a href="#">图书参考信息</a></li>
<li><a href="#">图书申请信息</a></li>
<li><a href="#">借书</a></li>
<li><a href="#">还书</a></li>
</ul>
</div>
</form>
</body>
</html>
用我的菜鸟水平写了个,思路上是一样的,改改,规范下,可以用,提示要吧生存,这个是例子就直接固定下来了