针对IE8以下不支持input-placeholder 属性

最新推荐文章于 2019-03-21 17:07:00 发布

原创最新推荐文章于 2019-03-21 17:07:00 发布 · 292 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

JS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种通过jQuery实现的方法，使IE8及以下版本的浏览器支持HTML5的placeholder属性。该方法允许这些旧版浏览器像现代浏览器一样显示和使用占位符文本。

CSS3新属性placeholder给表单带来了方便，但是IE8以下并不支持，增加一段JQ代码使得IE8以下浏览器能够像其他浏览器一样，获取placeholder的值，赋给val。

//input placeholder
    jQuery('[placeholder]').focus(function() {
	  var input = jQuery(this);
	  if (input.val() == input.attr('placeholder')) {
	    input.val('');
	    input.removeClass('placeholder');
	  }
	  input.css("color","#555");
	}).blur(function() {
	  var input = jQuery(this);
	  if (input.val() == '' || input.val() == input.attr('placeholder')) {
	    input.addClass('placeholder');
	    input.val(input.attr('placeholder'));
	    input.css("color","#888");
	  }
	}).blur().parents('form').submit(function() {
	  jQuery(this).find('[placeholder]').each(function() {
	    var input = jQuery(this);
	    if (input.val() == input.attr('placeholder')) {
	      input.val('');
	    }
	  })
	});

这里可以单独写在一个js文件中，需要用到的地方调用：

<!--[if lte IE 8]>
<script type="text/javascript" src="js/IE8.js"></script>
<![endif]-->

我加了下颜色变化，使得在IE8下跟其他浏览器基本一样，另外关于password要单独做处理。