js学习总结----案例之百度搜索框

web开发作者:dayu日期:4天前点击:0
//显示 /* 1、文本框获取焦点,并且文本框中有内容的时候 2、在文本框中操作内容(新输入/删除),如果内容没有清空,我们就显示,否则就隐藏 */ //隐藏 /* 1、点击页面中其余的位置(除了点击文本框和searchList里面的每一行)都隐藏; 2、点击searchList中的列表隐藏,但是还要把列表中的内容放到文本框中 */ //不管是获取焦点onfocus,还是在里面编辑内容onkeyup,都是有内容显示,没内容隐藏 var searchInp = document.getElementById(‘searchInp‘),searchList = document.getElementById(‘searchList‘); searchInp.onkeyup = searchInp.onfocus = function(){ var val = this.value.replace(/(^ +| +$)/g,‘‘)//获取文本框中的内容,并且去除它的首尾空格 searchList.style.display = val.length > 0 ? "block" : "none"; } document.body.onclick = function(e){ e = e || window.event; e.target = e.target || e.srcElement; //如果事件源是#searchList下的a标签,我们让searchList隐藏,并且把当前点击这个a中的内容放在文本框中 if(e.target.tagName.toLowerCase()==="a" && e.target.parentNode.parentNode.id==="searchList"){ searchList.style.display = "none"; searchInp.value = e.target.innerHTML; return; } //如果事件源是文本框还需要单独的处理 // if(e.target.id === "searchInp"){ // return; // } searchList.style.display = "none"; } //我们可以阻止一个容器中某些特殊性的元素,让其不在委托的范围内:我们只需要把这些不需要委托的阻止冒泡传播即可 searchInp.onclick = function(e){ e = e || window.event; e.stopPropagation ? e.stopPropagation() : e.cancelBubble = "true"; } </script> </body> </html>

js学习总结----案例之百度搜索框

原文地址:http://www.cnblogs.com/diasa-fly/p/7229151.html


下一篇       上一篇