H5之前要实现这个功能还要用到JS,H5出来之后新增加了placeholder属性,有了这个属性就就能轻松实现这个功能。

定义和用法

placeholder 属性提供可描述输入字段预期值的提示信息(hint)。

该提示会在输入字段为空时显示,并会在字段获得焦点时消失。

注释:placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password。(此处来自W3cSchool)

<form name="search" class="search" method="post">
  <input type="text" name="searchname" class="search_in" placeholder="请输入您要搜索的关键字" />
  <input type="submit" name="send" class="search_butt" value="搜索" />
</form>

以上是H5实现的代码。

<form name="search" class="search" method="post">
  <input type="text" name="searchname" class="searchinput" value="请输入您要搜索的关键字"
  onkeydown="if (event.keyCode==13) {}" onblur="if(this.value=='')value='请输入您要搜索的关键字';"
  onfocus="if(this.value=='请输入您要搜索的关键字')value='';" />
  <input type="submit" name="send" class="search_butt" value="搜索" />
</form>

以上是H5之前的实现方式

输入前的效果

输入后的效果

HTML 5 <input> placeholder 属性 实现搜索框提示文字点击输入后消失的更多相关文章

  1. HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置

    在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...

  2. 设计input搜索框提示文字点击消失的效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. html5文本框提示文字属性为placeholder

    html5文本框提示文字属性为placeholder 例子:  <textarea id="comment" class="commentCont"  n ...

  4. HTML 5 <input> placeholder 属性

    原文链接:http://www.w3school.com.cn/html5/att_input_placeholder.asp HTML 5 <input> placeholder 属性 ...

  5. 改进《完美让IE兼容input placeholder属性的jquery实现》的不完美

    <完美让IE兼容input placeholder属性的jquery实现>中的代码在IE9以下浏览器中会出错,原因是因为ie9以下的浏览器对input的标签的解释不同. 例如对以下文本框的 ...

  6. 完美让IE兼容input placeholder属性的jquery实现

    调用时直接引用jquery与下面的js就行了,相对网上的大多数例子来说,这个是比较完美的方案. /* * 球到西山沟 * http://www.cnzj5u.com * 2014/11/26 12:1 ...

  7. Html5 input placeholder 属性字体颜色修改。

    这篇文章主要介绍了有关HTML5 input placeholder 颜色修改方面的知识,需要的朋友可以参考下     Chrome支持input=[type=text]占位文本属性,但下列CSS样式 ...

  8. input placeholder属性 样式修改(颜色,大小,位置)

    placeholder属性 样式修改 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  9. html5 <input> placeholder 属性

    带有 placeholder 文本的搜索字段: <form action="demo_form.asp" method="get"> <inp ...

随机推荐

  1. OS之进程管理---实时CPU调度

    引言 一般来说,我们将实时操作系统区分为软实时系统(soft real-time system)和硬实时系统(hard real-time system).软实时系统不保证会调度关键实时进程,而只保证 ...

  2. IOC容器02

    获取xml文件路径,使用IO读取xml文件,使用Document对象解析xml文件,将xml中的bean的信息注册到BeanDefinition类,将BeanDefinition保存到一个map中:该 ...

  3. (转)Python 3 collections.defaultdict() 与 dict的使用和区别

    原文:https://www.cnblogs.com/herbert/archive/2013/01/09/2852843.html 在Python里面有一个模块collections,解释是数据类型 ...

  4. Netty核心概念(7)之Java线程池

    1.前言 本章本来要讲解Netty的线程模型的,但是由于其是基于Java线程池设计而封装的,所以我们先详细学习一下Java中的线程池的设计.之前也说过Netty5被放弃的原因之一就是forkjoin结 ...

  5. scala combineByKey用法说明

    语法是: combineByKey[C](   createCombiner: V => C,   mergeValue: (C, V) => C,   mergeCombiners: ( ...

  6. 使用SMTP发送邮件

    先定义一个邮件实体: public class EntityMail { /// <summary> /// 发件人 /// </summary> public string ...

  7. IntelliJ IDEA的黑白色背景切换(Ultimate和Community版本皆通用)

    不多说,直接上干货! IntelliJ IDEA的黑白色背景切换 File    ->   Setting    ->  Editor     ->   Colors & F ...

  8. CharacterRangeTable

    转载:https://github.com/jacoco/jacoco/wiki/CharacterRangeTable This page discusses a not yet available ...

  9. Python -- Gui编程 -- Tkinter的使用 -- 基本控件

    1.按钮 tkBtton.py import tkinter root = tkinter.Tk() btn1 = tkinter.Button(root, anchor=tkinter.E,\ te ...

  10. tensorflow summary

    定义summary writer = tf.summary.FileWriter(logdir=self.han_config.log_path, graph=session.graph) 1.sca ...