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 相关文章推荐
Js 中debug方式
Feb 07 Javascript
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
Jquery常用的方法汇总
Sep 01 Javascript
jquery html动态添加的元素绑定事件详解
May 24 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
通过vue手动封装on、emit、off的代码详解
May 29 Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
原生js实现碰撞检测
Mar 12 Javascript
vue路由分文件拆分管理详解
Aug 13 Javascript
如何在Express4.x中愉快地使用async的方法
Nov 18 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
phpmyadmin的#1251问题
2006/11/25 PHP
深入PHP数据加密详解
2013/06/18 PHP
那些年我们错过的魔术方法(Magic Methods)
2014/01/14 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
Express URL跳转(重定向)的实现方法
2017/04/07 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
Three.js实现3D机房效果
2018/12/30 Javascript
Vue实现的父组件向子组件传值功能示例
2019/01/19 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
在Python的web框架中配置app的教程
2015/04/30 Python
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
Python 12306抢火车票脚本
2018/02/07 Python
Python二元算术运算常用方法解析
2020/09/15 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
精灵市场:Pixie Market
2019/06/18 全球购物
华为慧通笔试题
2016/04/22 面试题
职业技术学校毕业生推荐信
2013/12/03 职场文书
电子银行营销方案
2014/02/22 职场文书
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书