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有的方法直接给文本框加上一个属性就可以实现这样的效果。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了微信小程序实现水平垂直滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
blur只是针对form表单控件的，而对于 span , div , li 之类的，则没办法触发它们的动作，本文有个示例，看看是怎么实现的2014-04-04
这篇文章主要为大家详细介绍了layui实现登陆界面验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
一文详解requestAnimationFrame请求动画帧
requestAnimationFrame是一个用于动画效果的 API,它使用浏览器的刷新率来执行回调函数,通常每秒钟执行60次,这篇文章主要给大家介绍了关于requestAnimationFrame请求动画帧的相关资料,需要的朋友可以参考下2023-12-12
计时器提供了一 个可以将代码片段异步延时执行的能力，javascript生来是单线程的（在一定时间范围内仅一部分js代码能运行），计时器为我们提供了一种避开这种 限制的方法，从而开辟了另一条执行代码的蹊径。2015-07-07
这篇文章主要介绍了JavaScript读取本地文件常用方法流程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
这篇文章主要为大家介绍了javascript实现2016新年版日历的详细代码，感兴趣的小伙伴们可以参考一下2016-01-01
JS实现的自定义显示加载等待图片插件(loading.gif)
这篇文章主要介绍了JS实现的自定义显示加载等待图片插件,涉及javascript针对图片的动态加载实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-06-06
这篇文章主要介绍了JS实现的3des+base64加密解密算法,结合完整实例形式分析了JavaScript实现的3des+base64加密解密算法简单使用技巧,需要的朋友可以参考下2018-05-05
异步模式在 Web 编程中变得越来越重要，如何处理异步请求后的操作是一件麻烦事。Promise 是一种异步编程模型，术语称作 Deferred 模式，它通过一组API来规范化异步操作，让异步操作的流程控制更加容易。2014-05-05
最新评论