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

代码如下：

 <!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. Coding能力提升小技巧

    一.使用变量的一般原则 1.变量初始化原则: 通常在变量声明时初始化; 在靠近变量第一次使用的位置初始化; 在类的构造函数里初始化变量. 2.作用域: 使变量引用局部化,即把引用到变量的地方尽可能集中 ...

  2. jquery中$().each() 和$.each()

    // 形参1: 当前的下标 // 形参2: 当前的dom节点元素 $('#div1').find('div').each(function (i, item) { // this === item 当 ...

  3. 「ZJOI2018」胖（ST表+二分）

    「ZJOI2018」胖(ST表+二分) 不开 \(O_2\) 又没卡过去是种怎么体验... 这可能是 \(ZJOI2018\) 最简单的一题了...我都能 \(A\)... 首先我们发现这个奇怪的图每 ...

  4. JavaScript基础-第2章

    目标 常用数据类型 基本语法 变量的定义与赋值 数据类型与转换 逻辑控制语句 条件语句 循环语句 函数定义 基本语法 变量 变量名以字母或下划线("_")开头 变量可以包含数字.从 ...

  5. Python3基础语法你学会了么

      编码 默认:源码文件以UTF-8编码,字符串都是unicode字符串 指定:   标识符 第一个字符:字母表中的字符或下划线 _ 其它部分:由字母.数字.下划线 _ 组成 大小写敏感 python ...

  6. C语言中几个常用数学计算函数ceil(), floor(), round()的用法

    最近在实现算法的过程中,遇到了使用几个数学计算函数,感觉挺有意思,就记下来 方便以后使用. ceil(x)返回不小于x的最小整数值(然后转换为double型). floor(x)返回不大于x的最大整数 ...

  7. Tools - 浏览器Chrome

    Chrome HomePage:https://www.google.com/chrome/ Chrome应用商店:https://chrome.google.com/webstore/categor ...

  8. Java线程池(ThreadPoolExecutor)原理分析与使用

    在我们的开发中"池"的概念并不罕见,有数据库连接池.线程池.对象池.常量池等等.下面我们主要针对线程池来一步一步揭开线程池的面纱. 使用线程池的好处 1.降低资源消耗 可以重复利用 ...

  9. [HAOI2017] 新型城市化

    给出的图中恰包含2个团,则图的补图为一个二分图,其最大独立集为原图的最大团. 我们知道,二分图的最大独立集=V-最小顶点覆盖,最小顶点覆盖=最大匹配. 问题转化为:计算删去后最大匹配减小的边集. 所以 ...

  10. C# log4net 使用

    利用log4net写入异常类日志,在网上搜索一阵之后便想记录下来,以便后期使用,同时希望帮到大家.  第一步:使用管理NuGet程序包导入log4net.dll 导入成功后会在引用下显示相应的log4 ...