技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置：首页 --> CSS/HTML --> 跨浏览器的HTML5占位文本(PlaceHolder)方案

跨浏览器的HTML5占位文本(PlaceHolder)方案

浏览:2008次  出处信息

HTML5里面一个非常不错的扩展功能就是可以在文本框上面增加占位文本。占位文本(PlaceHolder)是指当一个文本框没有被focus的时候显示的是提示文字，当他被点击之后就显示空白。这个功能很不错，但是并不是所有的浏览器都支持。这篇文章就来讨论一下怎样用比较简单的方法可以让所有浏览器都支持这个特性。

这里是例子
这里可以下载

传统的解决办法

在我们有这个属性之前，我们一般是通过Javascript来实现这个效果。 这段文字被设置在value属性里面，当聚焦了之后，检验文本框的值是否等于默认值，如果是则清空文本框。当文本框失去焦点的时候，再检查是否为空，为空则再写上默认值。这个方法很不高效，而且每个文本框都得去检测。

1

<input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}">

jQueyr 占位文本

现在有了HTML5之后，通过placeholder属性来设置就比value设置语义化的多了。然而，这个属性并不是所有的浏览器都支持，所以我们需要jQuery和Modernizr的支持。

在这里Modernizr是用来检测浏览器是否支持一些HTML5属性的。如果浏览器不支持，那么再运行jQuery代码。他会先找到所有带PlaceHolder属性的元素，然后存储在一个变量中。然后会将元素的value和这个变量对比，如果为空则显示placeholder里面的内容，并且会增加一个”placeholder”的css样式。

如果你想在你的网站中使用这个东西，需要引入jQuery和Modernizr，注意放置在合适的路径下，然后把下面的代码复制进去。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<script src="jquery.js"></script>
<script src="modernizr.js"></script>
 
$(document).ready(function(){
 
if(!Modernizr.input.placeholder){
 
	$('[placeholder]').focus(function() {
	  var input = $(this);
	  if (input.val() == input.attr('placeholder')) {
		input.val('');
		input.removeClass('placeholder');
	  }
	}).blur(function() {
	  var input = $(this);
	  if (input.val() == '' || input.val() == input.attr('placeholder')) {
		input.addClass('placeholder');
		input.val(input.attr('placeholder'));
	  }
	}).blur();
	$('[placeholder]').parents('form').submit(function() {
	  $(this).find('[placeholder]').each(function() {
		var input = $(this);
		if (input.val() == input.attr('placeholder')) {
		  input.val('');
		}
	  })
	});
 
}
 
</script>

去除Webkit搜索框样式

Webkit内核的浏览器会给搜索框增加一些额外的样式，通过下面的CSS可以去掉这个样式：

1
2
3
4
5
6
7
8

input[type=search] {
	-webkit-appearance: none;
}
 
input[type="search"]::-webkit-search-decoration, 
input[type="search"]::-webkit-search-cancel-button {
	display: none;
}

webkit search input

建议继续学习：

  1. HTML5 离线缓存-manifest简介    (阅读：16111)
  2. 面向移动设备的HTML5开发框架梳理    (阅读：5933)
  3. JavaScript，只有你想不到    (阅读：5111)
  4. HTML5本地存储初探(二)    (阅读：4398)
  5. Phonegap + HTML5 开发经验小结    (阅读：4111)
  6. HTML5是什么东东 我们为什么要关注    (阅读：3850)
  7. HTML5文件API之图片预览    (阅读：3682)
  8. HTML6 初探 — 你没看错，是6不是5    (阅读：3654)
  9. 让你的网站也像Gmail一样支持文件拖放上传-HTML5之File API    (阅读：3459)
  10. HTML5技术的调研以及贴吧应用总结    (阅读：3471)
QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：圆角头像的重构优化
后一篇：CSS两列流式布局 >>
文章信息
© 2009 - 2024 by blogread.cn 微博：@IT技术博客大学习

京ICP备15002552号-1