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

代码如下：

 <!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. Android热修复——Tinker的集成

    前言 做前端开发的都知道,当我们项目做完了以后,都会把应用上传到应用市场上供用户下载使用,比如上传到应用宝啊,应用汇啊,360啊,小米,华为,魅族啊,等等但是,有时候我们会经常遇到一些很扯淡的事情,刚 ...

  2. HTTP 协议基础概念和报文结构

    基础概念 1.WWW(World Wide Web,万维网)构建技术有3项: (1)把SGML(Standard Generalized Markup Language,标准通用标记语言)作为页面的文 ...

  3. 用jQuery修改右键菜单

    概述 以前在网上找过屏蔽右键菜单的代码,也找过屏蔽F12的代码,今天无意之中看到别人的右键菜单很有意思,我也想来搞一个. 思路 建立一个菜单并且隐藏起来. 用window.oncontextmenu屏 ...

  4. HTML里面form表单name,action,method,target,enctype等属性用法

    HTML里面的form表单里面的name,target,enctype,method以及action的用法 HML表单HTML里面的表单是HTML页面与浏览器交互的重要手段,表单主要提交一些客户端的数 ...

  5. python实现线性排序算法-计数排序

    计数排序假定输入元素的每一个都是介于0到k之间的整数,此处K为某个整数,当k=O(n)时,计数排序的运行时间为O(n) 它的基本思想是:根据每个输入元素x确定小于x的元素个数,根据这个信息把x直接放到 ...

  6. linux中变量的一些操作方法

    常见的一般有如下操作,可以对字符串进行简单操作: echo ${#var}打印变量var长度 echo "$var:3:8" 打印变量var第4个字符开始的8个字符echo ${v ...

  7. Difference Between Session.run and Tensor.eval

    [Question]: TensorFlow has two ways to evaluate part of graph: Session.run on a list of variables an ...

  8. list源码1(参考STL源码--侯捷):list节点、迭代器、数据结构

    list源码1(参考STL源码--侯捷):list节点.迭代器.数据结构 list源码2(参考STL源码--侯捷):constructor.push_back.insert list源码3(参考STL ...

  9. underscore.js源码解析【数组】

    // Array Functions // --------------- // Get the first element of an array. Passing **n** will retur ...

  10. js-ES6学习笔记-const命令

    1.const声明一个只读的常量.一旦声明,常量的值就不能改变. 2.const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值. 3.const的作用域与l ...