js实现搜索栏效果
小编这边主要是介绍一个js中搜索栏的实现（没有提交数据那些），重点在于对焦点问题的理解。
那么这边小编就是要实现这样的一个搜索框
对焦点的理解：
通俗来讲当我们鼠标单击一个盒子时光标停留在该盒子事件上实现用户与栏之间的交互，这样就表明该盒子获取了焦点，以案例来说我们平常搜索栏点击可以输入文字，这个时候该搜索栏就获得了焦点。
同理失去焦点也是同样当点击页面其余位置时失去对先前盒子可以进行的操作。
那么直接以小编这个案例来说代码如下：
CSS部分：
<style>
*{
margin: 0;
padding: 0;
}
input,button{
border: 0 none;
padding: 0;
outline-style: none;
}
.search{
margin: 100px auto;
width: 258px;
height: 40px;
overflow: hidden;
}
.search input{
float: left;
width: 208px;
height: 40px;
background: url("left.jpg") no-repeat;
padding-left:8px;
color: #ccc;
}
.search button{
float: left;
height: 40px;
width: 42px;
background: url("right.jpg") no-repeat;
cursor: pointer;
}
</style>
<body>
<div class="search">
<input type="text" value="请输入..." id="txt"> //盒子架构div中一个文本框一个按钮
<button id="btn"></button>
</div>
</body>
js部分：
<script>
window.onload=function () {
function $id(id) {
return document.getElementById(id);
} //虽然该案例中这种获取id方式比较麻烦但这是通常的一种方法避免一直去写获取
$id("txt").onfocus=function () {
if (this.value=="请输入..."){
this.value=""; //这边是赋值别搞错了
this.style.color="#333"; //黑色
}
} //当用户点击时初始文字消失
$id("txt").onblur=function () {
if (this.value==""){
this.value="请输入..."
this.style.color="#ccc"; //透明灰
} //谁调用this指向谁
}//当为空时用户点击其他地方显示初始化状态
$id("btn").onclick=function () {
alert("我可以点击");
} //这边只是试验一下按钮功能还在不在
}
</script>
这边另外介绍一些关于搜索栏实用方法：
1.进入页面时搜索栏已经自动获取了焦点
那么在js之中我们只需要将对象加上 对象.focus();
方法就可以实现进入页面时光标已经显示在添加该方法的对象上。
2.鼠标进过（或点击搜索框）搜索栏搜索栏内容被全选（该方法方便用户输入后鼠标经过可以直接删除搜索栏所有，当不想删除所有时用户可以点击在进行一个一个删除操作）
对象.事件=function(){
this.select();
} //这样就更便捷用户的删除操作
常见的（点击后全选）：
同时这边应用到了文本框同样也提及一下：
获取文本框中内容：以value属性获取
获取标签中内容：innerHTML属性获取
搜索栏在实战中运用还是很多的，这边主要是对于焦点问题的一个介绍，当然获取焦点方法不止这单单一种，之后小编会补充。
当然的我们在站中看到的搜索框有更完善的
我们看一下京东的搜索框，这边只是举例那么现在很多都是用到这样的搜索框，获取焦点以后框内文字还是有显示但你一输入内容他就消失了。那么怎样实现这样的搜索框呢？
首先我们明确一点，类似这样的搜索框显示的文字并非是文本框的value值
话不多说撸上代码（以小编做的那个简单的导航框实现）：
首先div中我们加上了label标签，也就是我们点击后看到的文字
然后给他加上CSS属性（注意label标签只能以定位的方式定位到文本框中）：
.search label {
font-size: 12px;
color:#ccc;
position: absolute; /*以绝对定位来定位label到文本框合适位置当然同时也要为父亲div盒子加上相对定位*/
top:12px;
left:12px;
cursor: text; /*使鼠标放到lable文字上时还是光标*/
}
那么这样的话js部分有很大差异：
<script>
window.onload=function () {
function $id(id) {
return document.getElementById(id);
}
$id("txt").oninput=function () { //判断用户输入栏是否为空来使得label是否消失
if (this.value==""){
$id("lab").style.display="block";
}
else {
$id("lab").style.display="none";
}
}
}
</script>
效果图如下，若输入则浅文字消失
当然小编这个案例考虑到了一些兼容性问题，如果是在IE9后的浏览器用H5有的方法直接给文本框加上一个属性就可以实现这样的效果。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
基于JS实现仿京东搜索栏随滑动透明度渐变效果
废话不多说,直接上代码: 1.HTML <header class="module-layer"> <div class="module-layer-content"> <div class="search-box-cover"></div> <p class="layer-return"></p> <h1 class="layer-hea
-
推荐js实现商品分类到搜索栏友好提示（人机交互）第1/3页
中间的表格代表搜索表单,要实现的是点商品分类后有一个方框指向到搜索栏,用以清楚地告诉用户:点商品分类后是哪里改变了转载请注明出处 blueidea 方框移动 笔记本 小家电 电冰箱 波比娃娃 小家电 小家电 笔记本 小家电 电冰箱 波比娃娃 小家电 小家电 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 呵呵,效果很棒,不过在ff下有些小问题,已经改了.加精 方框移动 笔记本 小家电 电冰箱 波比娃娃 小家电 小家电 笔记本 小家电 电冰箱 波比娃娃 小家电 小家电 [Ctrl+A
-
js实现搜索栏效果
小编这边主要是介绍一个js中搜索栏的实现(没有提交数据那些),重点在于对焦点问题的理解. 那么这边小编就是要实现这样的一个搜索框 对焦点的理解: 通俗来讲当我们鼠标单击一个盒子时光标停留在该盒子事件上实现用户与栏之间的交互,这样就表明该盒子获取了焦点,以案例来说我们平常搜索栏点击可以输入文字,这个时候该搜索栏就获得了焦点. 同理失去焦点也是同样当点击页面其余位置时失去对先前盒子可以进行的操作. 那么直接以小编这个案例来说代码如下: CSS部分: <style> *{ margin: 0; pa
-
JS遮罩层效果 兼容ie firefox jQuery遮罩层
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
-
Vue.js实现拖放效果的实例
页面效果如下所示: 代码请看这里,当当当当: html: <template> <div class='drag-content'> <div class='project-content'> <div class='select-item' draggable='true' @dragstart='drag($event)' v-for='pjdt in projectdatas'>{{pjdt.name}}</div> </div>
-
bootstrap vue.js实现tab效果
本文实例为大家分享了bootstrap vue.js实现tab效果的具体代码,供大家参考,具体内容如下 项目目录结构 Student.js代码 function Student(){ this.baseInfo = { tabStatus : true , name : '张三', sex : 'male' } , this.parentsInfo = { tabStatus : false, fatherName : '张全蛋', motherName : '李铁柱' } , this.stu
-
JS实现Fisheye效果动感放大菜单代码
本文实例讲述了JS实现Fisheye效果动感放大菜单代码.分享给大家供大家参考,具体如下: 这款Fisheye Menu,是采用JS+CSS+XHTML实现的动感放大菜单,放到图标上的时候,图标会被放大,整个菜单有缓冲弹簧的效果,学jQuery的朋友见的比较多,不过本款没有用到jQuery,效果却同样精彩. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fisheye-style-menu-demo/ 具体代码如下: <!DOCTYPE
-
基于React.js实现原生js拖拽效果引发的思考
一.起因&思路 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖拽效果. 首先,其实拖拽效果的思路是很简单的.主要就是三个步骤: 1.onmousedown的时候,启动可拖拽事件,记录被拖拽元素的原始坐标参数. 2.onmousemove的时候,实时记录鼠标移动的距离,结合被拖拽元素第一阶段的坐标参数,计算并设置新的坐标值. 3.onmouseup的时候,关闭可拖拽事件,记录新的坐标值. 注意:这里主要是通过绝对定位的top和left来确定元素的位置
-
简单实现js选项卡切换效果
本文实例为大家分享了js选项卡切换效果的具体代码,供大家参考,具体内容如下 实现思路: 1.首先获取id元素. 2.for循环历遍按钮元素添加onclick事件. 3.排他思想,点击按钮时设置所有选项卡按钮样式为空,利用this关键字指定当前选项卡获得高亮样式. 4.下面的多个div内容块以此类推. 源代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu
-
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
最近在做博客的目录功能,发现一个在现代浏览器间的一个bug,或是称之为差异,即页面滚动值(scrollTop)的获取与设定. 在此之前先说一下关于页面元素的坐标获取,这张图的经典性不必再提. 实现滚动到某位置功能 一个最主要的功能就是实现点击标题页面滚动,因为我们要滚动到页面某个标题,所以需要计算出滚动这个元素的具体绝对位置,而常用的offsetTop是获取到当前元素与之最近的决定其定位的元素的偏移量,此处不适用. 此处应使用浏览器原生提供的 getBoundingClientRect 接口,此
-
简单实现js无缝滚动效果
本文实例为大家分享了js无缝滚动效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } img{ vert
-
js省市联动效果完整实例代码
本文实例讲述了js省市联动效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title></title> <script language="javascript" type="text/javascript"> //定义 城市 数据数组 cityArray = new Array(); cityArray[0] = new Array("北