目标效果：点击搜索框，搜索框内提示信息消失，可输入搜索信息，点击搜索框外搜索框如果没提示信息或者为空时，显示搜索框提示信息，如果有搜索信息，显示搜索信息。

代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <input class="i1" type="text" value="提示信息" onfocus="hide(this)" onblur="show(this)">

     <style>

         .i1{

             color: gray;

         }

     </style>

     <script type="text/javascript">

         function hide(ths) { //隐藏提示信息，样式去掉

             ths.value = '';

             ths.className = '';

         }

         function show(ts) { //如果没输入任何内容或者搜索框空时，添加提示信息和样式

             var cont = ts.value;

             if (cont == '提示信息' || cont.trim().length == 0){

                 ts.value = '提示信息';

                 ts.className = 'i1';

             };

         }

     </script>

 </body>

 </html>

js之搜索框的更多相关文章

  1. typecho博客组插件:openSug.js百度搜索框下拉提示免费代码

      Typecho候选搜索增强插件:安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让Typecho搜索更便捷! 支持百度.谷歌.雅虎.Yandex.360好搜.UC神马.酷狗.优酷.淘 ...

  2. 使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码】

    项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...

  3. 使用jsonp跨域调用百度js实现搜索框智能提示（转）

    http://www.cnblogs.com/oppoic/p/baidu_auto_complete.html 项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好 ...

  4. js实现搜索框响应回车键

    1.HTML页面, 注意:不要用使用form标签. Html代码 收藏代码<input type="text" name="keyword" id=&qu ...

  5. js的搜索框

    第一种  单独一个form表单提交 <div class="hc-prm-search search flr"> <form action="/user ...

  6. 通过cookie实现搜索框内容保存关闭浏览器之前的操作、jq js实现方法

    jq实现的方法: jq需要在页面中引入JQ.cookie插件 这是一个超轻量级插件 要实现的效果: 下面是jq代码: $(function(){ var til=$("#orderInfoC ...

  7. JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件

    JS: document.getElementById("input对象的ID").addEventListener('input',function(){ console.log ...

  8. js实现百度搜索框滑动固定顶部

    现在很多主流系统例如百度.有道.爱奇艺等的搜索框都有一个特点,滑动到刚好看不到搜索框时,固定搜索框到顶部,这也算是一个对用户友好型的操 作. 在看了百度的js和css后自己摸索出来实现效果,还是学艺不 ...

  9. JS实现选择菜单栏（配合慕课网淘宝搜索框的课程）

    以下是关于实现慕课网淘宝搜索框的JS代码,不过只有选择菜单栏(其余比较容易实现). <!doctype html> <html> <head> <!--在IE ...

随机推荐

  1. vs2008快捷键一览表

    Ctrl+E,D ----             格式化全部代码 Ctrl+K,F ----             格式化选中的代码 CTRL + SHIFT + B          生成解决方 ...

  2. 微信小程序之自定义模态弹窗（带动画）实例

    1.基本需求. 实现用户自定义弹框 带动画(动画可做参靠,个人要是觉得不好看可以自定义动画) 获取弹出框的内容,自定义事件获取 2.案例目录结构 二.程序实现具体步骤 1.弹框index.wxml代码 ...

  3. 电子技术经典资料汇总：PCB设计篇

    电子技术经典资料汇总:PCB设计篇,下面的链接是一个一个的文件下载的,也是压缩包的内容,只不过我把他们给汇总成了一个压缩包,方便大家下载,还有更多电子技术必备基础资料,通信无线类的,C语言篇的,关于电 ...

  4. Akka-Cluster（2）- distributed pub/sub mechanism 分布式发布/订阅机制

    上期我们介绍了cluster singleton,它的作用是保证在一个集群环境里永远会有唯一一个singleton实例存在.具体使用方式是在集群所有节点部署ClusterSingletonManage ...

  5. 从零开始学习渗透Node.js应用程序

    本文来源于i春秋学院,未经允许严禁转载 0x01 介绍 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一 ...

  6. Android 使用 Camera2 完成预览和拍照

    Android API 21新增了Camera2,这与之前的camera架构完全不同,使用起来也比较复杂,但是功能变得很强大. 在讲解开启预览之前,首先需要了解camera2的几个比较重要的类: Ca ...

  7. MySQL-Cluster 和主从(Master,Slave)搭建总结

    双主互备,主从 什么是双主 MultiSource 多源复制 原理及流程图 主要步骤 1,在 Master Server 上开启 bin log 日志 和 设置 server-id  :(在my.cn ...

  8. Testing - 软件测试知识梳理 - 基础概念

    测试是为了度量和提高被测试软件的质量,对测试软件进行工程设计.实施.维护的的整个生命周期过程. 仅仅发现Bug是测试的初步,而分析出根本原因推动问题的解决,却要有很深的功底. 不同的测试岗位从事不同的 ...

  9. python中的变量和算数运算

    先说下变量的作用: 用来保存数据,为什么要保存? 后面要使用. 变量的概念: 变量就是用来存储一些信息,供程序以后调用或者操作修改.变量为标记数据提供了一种描述性的名字,以便我们的程序可以被程序的阅读 ...

  10. win10 + cuda8.0 + caffe SSD + vs2015 + python3

    一.下载 git clone https://github.com/runhang/caffe-ssd.git cd caffe-ssd 1. 修改 build_win.cmd if !PYTHON_ ...