原文地址：HTML5′s placeholder Attribute

演示地址: placeholder演示

原文日期： 2010年08月09日

翻译日期： 2013年8月6日

浏览器引入了许多的HTML5 特性: 有些是基于HTML的，有些是JavaScript APIs形式的,但都很有用。其中我最喜欢的一个就是为input元素引入了placeholder属性。

placeholder属性显示引导性文字直到输入框获取输入焦点,当有了用户输入内容后引导性内容将会自动隐藏。你肯定见过用JavaScript实现的这种技术成千上万次了,但是来自HTML5的原生支持一般来说会更好一些。

HTML 代码 如下：

<input type="text" name="address" placeholder="请输入常住地址...">

你要做的仅仅是添加一个placeholder属性域,以及一些引导性的文字内容,不需要额外的JavaScript脚本来实现这种效果，是不是感觉很棒?

测试 placeholder 的支持度

(注意这是2010年的文章，到现在，2013年，主流浏览器应该都支持了.)

既然 placeholder 是一个新的功能，那么测试浏览器的支持是很有必要的。JS代码如下：

// 在JS中创建一个input元素，并判断元素有没有一个叫做placeholder的属性
// 如果浏览器支持的话，那么在js里面引用的DOM就会存在这个属性
function hasPlaceholderSupport() {
	var input = document.createElement('input');
	return ('placeholder' in input);
}

而如果浏览器不支持placeholder特性，那你就需要一个fallback策略来处理，比如MooTools,Dojo,或者其他JavaScript工具。(现在dojo可以用的少了，国内更多的是jQuery和ExtJS。)

/* jQuery 代码,当然，记得引入jQuery的库哦*/
$(function(){
  if(!hasPlaceholderSupport()){
	// 获取address元素
	var $address = $("input[name='address']");
	placeholder = $address.attr("placeholder");
	// 绑定 focus事件
	$address.bind('focus',function(){
	  if(placeholder == $address.val()){
	    $address.val('');
	  }
	});
	// 失去焦点事件
	$address.bind('blur',function(){
	  if('' == $address.val()){
	    $address.val(placeholder);
	  }
	});
  }
});

placeholder 是浏览器另一个伟大的附加属性用于取代js片段，你甚至可以编辑HTML5的placeholder样式.

全部代码如下：

<!DOCTYPE HTML>
<html>
 <head>
  <title> HTML5 placeholder属性演示 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="renfufei@qq.com">
  <meta name="Description" content="original=http://davidwalsh.name/html5-placeholder">
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script>
	// 在JS中创建一个input元素，并判断元素有没有一个叫做placeholder的属性
	// 如果浏览器支持的话，那么在js里面引用的DOM就会存在这个属性
	function hasPlaceholderSupport() {
		var input = document.createElement('input');
		return ('placeholder' in input);
	}
	/* jQuery 代码,当然，记得引入jQuery的库哦*/
	$(function(){
	  if(!hasPlaceholderSupport()){
		// 获取address元素
		var $address = $("input[name='address']");
		placeholder = $address.attr("placeholder");
		// 绑定 focus事件
		$address.bind('focus',function(){
		  if(placeholder == $address.val()){
			$address.val('');
		  }
		});
		// 失去焦点事件
		$address.bind('blur',function(){
		  if('' == $address.val()){
			$address.val(placeholder);
		  }
		});
	  }
	});
  </script>
 </head>

 <body>
	<div>
		<form method="post" action="">
			<input type="text" name="address" placeholder="请输入常住地址...">
			<input type="submit" value="测试">
		</form>
	</div>
 </body>
</html>

HTML5 placeholder(空白提示) 属性的更多相关文章

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

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

  2. HTML5表单提示placeholder属性兼容IE

    placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 <inpu ...

  3. （转）html5 Placeholder属性兼容IE6、7方法

    使低版本浏览器支持Placeholder有很多方法,都不是很完美,或多或少有点问题,且有些原生支持的浏览器在获得焦点时会清空Placeholder提示.发现zhihu的解决方法不错,特记录下 wind ...

  4. html5 placeholder ie 不兼容问题 解决方案

    解决HTML5 placeholder的方案 来源:   时间:2013-09-05 20:06:49   阅读数:11375 分享到: 0 [导读] 使低版本浏览器支持Placeholder有很多方 ...

  5. HTML5系列一（属性概述）

    HTML5概述 HTML5於2004年被WHATWG(网页超文本技术工作小组)提出,於2007年被W3C接纳 在2008年1月22日,第一份正式草案已公布.WHATWG表示该规范是目前正在进行的工作, ...

  6. IE8 不支持html5 placeholder的解决方案

    IE8不支持html5 placeholder的解决方法. /** * jQuery EnPlaceholder plug * version 1.0 2014.07.01戈志刚 * by Frans ...

  7. 解决PL/SQL Dev连接Oracle弹出空白提示框

    第一次安装Oracle,装在虚拟机中,用PL/SQL Dev连接远程数据库的时候老是弹出空白提示框,网上找了很久,解决方法也很多,可是就是没法解决我这种情况的. 没办法,只能自己研究,经过大概一天时间 ...

  8. PL/SQL Dev连接Oracle弹出空白提示框的解决方法分享

    第一次安装Oracle,装在虚拟机中,用PL/SQL Dev连接远程数据库的时候老是弹出空白提示框,网上找了很久,解决方法也很多,可是就是没法解决我这种情况的. 出现这种问题,解决方法大概有这几种: ...

  9. HTML5表单新属性

    HTML5表单新属性 autofocus  自动聚焦 <input type="text" autofocus> placeholder占位文本 tel         ...

随机推荐

  1. break 与 continue

    1.break ①只有一层循环时,作用是跳出循环语句,执行后面的代码. ②break存在于循环嵌套的内层循环时,只能跳出内层循环,如果想要跳出外层循环,需要对外层循环添加标记. 2.continue ...

  2. Redis从入门到精通：初级篇

    原文链接:http://www.cnblogs.com/xrq730/p/8890896.html,转载请注明出处,谢谢 Redis从入门到精通:初级篇 平时陆陆续续看了不少Redis的文章了,工作中 ...

  3. div英文内容超过div长度

    添加css word-break: normal;word-wrap: break-word;

  4. python实现购物车

    一. 功能: 1. 用户充值余额 判断余额输入格式是否正确,正确则转换成float型. 2. 显示商品列表 根据已有商品显示所有商品的序号.商品名称.和价格供用户选择 3. 用户选择商品 判断用户输入 ...

  5. delphi 给EXE文件增加区段

    学习 PE 可执行文件格式,用 delphi 实现给 EXE 文件增加区段 源码下载(StudyPE.zip) unit uStudyPE; interface uses Classes, SysUt ...

  6. Linux搭建lamp(Apache+PHP+Mysql环境)centos7.2版详细教程

    我们更多的网站服务器是选择了Linux系统,这里建议你选择centos,这也是阿里云ecs推荐的系统,在服务器上比较推荐centos,特别对于新手,首选CentOS,并不是centos比Debian和 ...

  7. Ubuntu 16.04: How to resolve libqt5x11extras5 (>= 5.1.0) but it is not going to be installed

    Issue: When you install Virtualbox 5.1 on Ubuntu 16.04, you may encounter following error: root@XIAY ...

  8. ejabberd开发和部署

    ejabberd开发和部署 (金庆的专栏 2016.10) 搭建了自己的ejabberd集群,然后少量更改源码,实现定制的XMPP服务器. 从github fork ejabberd 库,定为 mas ...

  9. 设子数组A[0:k]和A[k+1:N-1]已排好序(0≤K≤N-1)。试设计一个合并这2个子数组为排好序的数组A[0:N-1]的算法。

    设子数组A[0:k]和A[k+1:N-1]已排好序(0≤K≤N-1).试设计一个合并这2个子数组为排好序的数组A[0:N-1]的算法.要求算法在最坏情况下所用的计算时间为O(N),只用到O(1)的辅助 ...

  10. 从源码安装git

    蛋疼的阿里云,git版本居然才1.9.只能手动安装了. 预装 apt-get update apt-get --yes install libcurl4-gnutls-dev libexpat1-de ...