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

代码如下：

 <!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. azkaban disable 停用部分工作流

    在使用azkaban作为调度工具的时候,难免遇到只需要跑工作流某部分的情况,这时需要用到停用部分工作的操作, 如图:

  2. 项目Alpha冲刺（团队5/10）

    项目Alpha冲刺(团队5/10) 团队名称: 云打印 作业要求: 项目Alpha冲刺(团队) 作业目标: 完成项目Alpha版本 团队队员 队员学号 队员姓名 个人博客地址 备注 221600412 ...

  3. 从文本中读取字符——feof函数问题

    feof()函数 函数原型:int feof(FILE *fp): 函数功能:检测流上的文件结束符,如果文件结束,则返回非0值,否则返回0,文件结束符只能被clearerr()函数清除 (函数feof ...

  4. springboot创建统一异常拦截器全局处理 异常

    1.创建Exception类 public class MyException extends RuntimeException { private ErrorCodeEnum errorCode; ...

  5. Python内置常量

    引言 Python内置的常量不多,只有6个,分别是True.False.None.NotImplemented.Ellipsis.__debug__. 一. True 1. True是bool类型用来 ...

  6. C#开源项目大全

    C#开源项目大全   商业协作和项目管理平台-TeamLab 网络视频会议软件-VMukti 驰骋工作流程引擎-ccflow [免费]正则表达式测试工具-Regex-Tester Windows-Ph ...

  7. js实现深拷贝的一些方法

    在ECMAScript变量中包含两种不同类型的值:基本类型值和引用类型值. 基本类型值:Undefined.Null.Boolean.Number.String 引用类型值:Object.Array. ...

  8. Linux(CentOS6)系统安装Windows字体

    这里说个插曲,最近在linux(CentOS6)服务器上面发布了个Web项目,结果发现,有一处的汉字字体渲染不出来,显示的是“□□□□”.因为我的tomcat编码已经修改了URIEncoding为UT ...

  9. AOP技术基础(转)

    1.引言 2.AOP技术基础 3.Java平台AOP技术研究 4..Net平台AOP技术研究 2.1 AOP技术起源 AOP技术的诞生并不算晚,早在1990年开始,来自Xerox Palo Alto ...

  10. php 获取中文字符串首字母

    <?php $limit=array( //gb2312 拼音排序 array(45217,45252), //A array(45253,45760), //B array(45761,463 ...