HTML 5 <input> placeholder 属性 实现搜索框提示文字点击输入后消失
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 属性 实现搜索框提示文字点击输入后消失的更多相关文章
- HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置
在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...
- 设计input搜索框提示文字点击消失的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html5文本框提示文字属性为placeholder
html5文本框提示文字属性为placeholder 例子: <textarea id="comment" class="commentCont" n ...
- HTML 5 <input> placeholder 属性
原文链接:http://www.w3school.com.cn/html5/att_input_placeholder.asp HTML 5 <input> placeholder 属性 ...
- 改进《完美让IE兼容input placeholder属性的jquery实现》的不完美
<完美让IE兼容input placeholder属性的jquery实现>中的代码在IE9以下浏览器中会出错,原因是因为ie9以下的浏览器对input的标签的解释不同. 例如对以下文本框的 ...
- 完美让IE兼容input placeholder属性的jquery实现
调用时直接引用jquery与下面的js就行了,相对网上的大多数例子来说,这个是比较完美的方案. /* * 球到西山沟 * http://www.cnzj5u.com * 2014/11/26 12:1 ...
- Html5 input placeholder 属性字体颜色修改。
这篇文章主要介绍了有关HTML5 input placeholder 颜色修改方面的知识,需要的朋友可以参考下 Chrome支持input=[type=text]占位文本属性,但下列CSS样式 ...
- input placeholder属性 样式修改(颜色,大小,位置)
placeholder属性 样式修改 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- html5 <input> placeholder 属性
带有 placeholder 文本的搜索字段: <form action="demo_form.asp" method="get"> <inp ...
随机推荐
- OS之进程管理---实时CPU调度
引言 一般来说,我们将实时操作系统区分为软实时系统(soft real-time system)和硬实时系统(hard real-time system).软实时系统不保证会调度关键实时进程,而只保证 ...
- IOC容器02
获取xml文件路径,使用IO读取xml文件,使用Document对象解析xml文件,将xml中的bean的信息注册到BeanDefinition类,将BeanDefinition保存到一个map中:该 ...
- (转)Python 3 collections.defaultdict() 与 dict的使用和区别
原文:https://www.cnblogs.com/herbert/archive/2013/01/09/2852843.html 在Python里面有一个模块collections,解释是数据类型 ...
- Netty核心概念(7)之Java线程池
1.前言 本章本来要讲解Netty的线程模型的,但是由于其是基于Java线程池设计而封装的,所以我们先详细学习一下Java中的线程池的设计.之前也说过Netty5被放弃的原因之一就是forkjoin结 ...
- scala combineByKey用法说明
语法是: combineByKey[C]( createCombiner: V => C, mergeValue: (C, V) => C, mergeCombiners: ( ...
- 使用SMTP发送邮件
先定义一个邮件实体: public class EntityMail { /// <summary> /// 发件人 /// </summary> public string ...
- IntelliJ IDEA的黑白色背景切换(Ultimate和Community版本皆通用)
不多说,直接上干货! IntelliJ IDEA的黑白色背景切换 File -> Setting -> Editor -> Colors & F ...
- CharacterRangeTable
转载:https://github.com/jacoco/jacoco/wiki/CharacterRangeTable This page discusses a not yet available ...
- Python -- Gui编程 -- Tkinter的使用 -- 基本控件
1.按钮 tkBtton.py import tkinter root = tkinter.Tk() btn1 = tkinter.Button(root, anchor=tkinter.E,\ te ...
- tensorflow summary
定义summary writer = tf.summary.FileWriter(logdir=self.han_config.log_path, graph=session.graph) 1.sca ...