js实现搜索栏效果


Posted in Javascript onNovember 16, 2018

小编这边主要是介绍一个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();

}  //这样就更便捷用户的删除操作

常见的(点击后全选):

js实现搜索栏效果

同时这边应用到了文本框同样也提及一下:

获取文本框中内容:以value属性获取

获取标签中内容:innerHTML属性获取

搜索栏在实战中运用还是很多的,这边主要是对于焦点问题的一个介绍,当然获取焦点方法不止这单单一种,之后小编会补充。     

当然的我们在站中看到的搜索框有更完善的

js实现搜索栏效果

我们看一下京东的搜索框,这边只是举例那么现在很多都是用到这样的搜索框,获取焦点以后框内文字还是有显示但你一输入内容他就消失了。那么怎样实现这样的搜索框呢?

首先我们明确一点,类似这样的搜索框显示的文字并非是文本框的value值

话不多说撸上代码(以小编做的那个简单的导航框实现):

首先div中我们加上了label标签,也就是我们点击后看到的文字

js实现搜索栏效果

然后给他加上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>

效果图如下,若输入则浅文字消失

js实现搜索栏效果

当然小编这个案例考虑到了一些兼容性问题,如果是在IE9后的浏览器用H5有的方法直接给文本框加上一个属性就可以实现这样的效果。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 表单中textarea字数限制实现代码
Dec 07 Javascript
使用JS画图之点、线、面
Jan 12 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 Javascript
js注册时输入合法性验证方法
Oct 21 Javascript
利用babel将es6语法转es5的简单示例
Dec 01 Javascript
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
Vue Router的懒加载路径的解决方法
Jun 21 Javascript
ng-alain表单使用方式详解
Jul 10 Javascript
关于vue编译版本引入的问题的解决
Sep 17 Javascript
JavaScript实现简单音乐播放器
Apr 17 #Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 #Javascript
微信小程序自定义toast的实现代码
Nov 16 #Javascript
vue实现简单的星级评分组件源码
Nov 16 #Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 #Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 #Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 #Javascript
You might like
深入PHP数据缓存的使用说明
2013/05/10 PHP
php启用zlib压缩文件的配置方法
2013/06/12 PHP
PHP生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
php文件缓存类汇总
2014/11/21 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
JS链式调用的实现方法
2013/03/07 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
Python深入学习之对象的属性
2014/08/31 Python
python实现的简单抽奖系统实例
2015/05/22 Python
Python实现Kmeans聚类算法
2020/06/10 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
摄影助理岗位职责
2014/02/07 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
赢在中国观后感
2015/06/02 职场文书
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技