首先,判断浏览器是否支持placeholder属性:

var input = document.createElement('input');
if("placeholder" in input){
alert('支持');
}else{
alert('不支持');
}

(1)如果只需要让不支持placeholder的浏览器能够支持改功能,并不要求支持原生placeholder的浏览器表现一致,那么可以采用如下方法:

Placeholder在不支持html5的低版本的浏览器中,placeholder属性是无效的,非现代浏览器( 例如 IE6-IE9 )是不支持placeholder属性的
 function placeholder(nodes,pcolor) {
if(nodes.length && !("placeholder" in document_createElement_x("input"))){
for(i=0;i
var self = nodes[i],
placeholder = self.getAttribute('placeholder') || '';
self.onfocus = function(){
if(self.value == placeholder){
self.value = '';
self.style.color = "";
}
}
self.onblur = function(){
if(self.value == ''){
self.value = placeholder;
self.style.color = pcolor;
}
}
self.value = placeholder;
self.style.color = pcolor;
}
}
}

(2)如果需要自定义样式,并且希望placeholder在所有浏览器下表现一致,可以通过利用label标签模拟一个placeholder的样式放到输入框上,当输入框获得焦点的时候,隐藏label,当输入框失去焦点的时候,显示label。 或者是在input上应用背景图片,获得和失去焦点的时候切换背景图片是否显示。

<script>
$(function(){
$('.for_text').click(function(){
$('.text').focus()
})
$('.text').blur(function(){
$('.for_text').hide();
})
})
</script>
<style>
.for_text{ position:absolute; cursor:text; margin:5px; color:#999;}
.text{ padding:5px;}
</style>
<form>
<label for="text" class="for_text">请输入文本</label>
<input type="text" name="text" class="text"/>
</form>

(3)jquery解决方案:

jQuery('[placeholder]').focus(function() {
var input = jQuery(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = jQuery(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
jQuery(this).find('[placeholder]').each(function() {
var input = jQuery(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});

(4)最后一种方法,也是使用最常见的,但是不能改变文本的颜色,使用脚本的方式判断文本框的值,获取焦点或者输入文本的时候,如果为预设的值,那么就清空文本框,失去焦点的时候,如果文本框的值为空,则替换为我们预设的值。

<input type="text" name="text" value="请输入文本" class="text"
onFocus="if(this.value=='请输入文本') this.value = ''"
onBlur="if(this.value=='') this.value='请输入文本'"
/>

拓展:

想改变Placeholder文字的颜色,并不想改变输入文字的颜色。正确的写法如下:

::-moz-placeholder{color:red;}              //Firefox
::-webkit-input-placeholder{color:red;} //Chrome,Safari
:-ms-input-placeholder{color:red;} //IE10

ie上如何兼容placeholder的更多相关文章

  1. 【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果

    placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于 ...

  2. IE8兼容placeholder的方案

    用JavaScript解决Placeholder的IE8兼容问题 placeholder属性是HTML5新添加的属性,当input或者textarea设置了该属性后,该值的内容将作为灰色提示显示在文本 ...

  3. css3在不同型号手机浏览器上的兼容一览表

    网上搜集了css3对不同系统手机浏览器的支持情况(ios/android/winphone)备份一下以便查看.  以下资料由微信产品部"白树"整理, 转载请注明. √:完全支持   ...

  4. jQuery实现ie浏览器兼容placeholder效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 兼容placeholder

    众所周知.IE9以下不兼容placeholder属性,因此自己定义了一个jQuery插件placeHolder.js.以下为placeHolder.js的代码: /** * 该控件兼容IE9下面,专门 ...

  6. html5的placeholder属性(IE如何兼容placeholder属性)

    界面UI推荐 jquery html5 实现placeholder兼容password  IE6 html5的placeholder属性(IE如何兼容placeholder属性) 2013-01-05 ...

  7. placeholde属性在IE10以下浏览器上的兼容方案

    首先,判断浏览器是否支持placeholder属性:目前经验来看placeholder属性在     IE10及以上   才能正常显示,而我们实际项目中往往要求兼容到   IE8 var input ...

  8. 【JS】IE兼容placeholder

    直接上代码: $(document).ready(function () { var doc = document, textareas = doc.getElementsByTagName('tex ...

  9. IE如何兼容placeholder属性

    在前端开发中,经常需要为input设置placeholder属性,但是placeholder是HTML5新属性,在IE10以下不兼容,那么如何完美兼容呢? 网上搜索了一下,其实也挺简单的,可以采用以下 ...

随机推荐

  1. ios 音乐播放,音乐信息显示方法

    下面的博客写的很清楚了 http://msching.github.io/blog/page/2/ 主要涉及AVAudioPlayer和下面这几个函数 MPNowPlayingInfoCenter.d ...

  2. tcpdump for android L 5.x with pie support

    由于使用了NDK编译的可执行文件在应用中调用,在4.4及之前的版本上一直没出问题. 最近由于要测试在Android L上的运行情况发现,当运行该可执行文件时,报如下错误: error: only po ...

  3. kali安装vmware tools

    昨天在网上搜了半天如何在kail下安装tools工具,结果都没有成功,今天就来说说我是怎么安装成功的. 1.按照网上的办法只能到这一步,一直提示找不到路径,点了回车也会照常出现这样的情况. Searc ...

  4. Java实验四和实验五

    实验四 类的继承性和多态性 [开发语言及实现平台或实验环境] Windows2000 或XP,JDK1.6与Jcreator4.0 [实验目的] 1.  掌握OOP方式进行程序设计的方法, 2.  了 ...

  5. cannot use the same dataset for report.dataset and page.dataset

    把page中的dataset中填的数据表删除.(改成not assigned)

  6. 将项目导入eclipse中出现的jsp页面报错解决

  7. JavaScript高级程序设计学习笔记--函数表达式

    关于函数声明,它的一个重要特征就是函数声明提升,意思是在执行代码之间会读取函数声明,意思是在执行代码之前会先读取函数声明.这就意味着可以把函数声明放在调用它的语句 后面. sayHi(); funct ...

  8. 【编程题目】有 4 张红色的牌和 4 张蓝色的牌,主持人先拿任意两张,再分别在 A、B、C 三人额头上贴

    第 22 题(推理):有 4 张红色的牌和 4 张蓝色的牌,主持人先拿任意两张,再分别在 A.B.C 三人额头上贴任意两张牌,A.B.C 三人都可以看见其余两人额头上的牌,看完后让他们猜自己额头上是什 ...

  9. Web上的支持的图片格式以及它们之间的区别

    一.GIF(图形交换格式) GIF格式的图片最多只能保存256中颜色,该格式支持透明色,支持动画效果. 二.JPEG(联合图像专家组) JPEG格式不支持透明色及动画,颜色可达1670种. 三.PNG ...

  10. Vi文档

    Vi简介 Vi是一种广泛存在于各种UNIX和Linux系统中的文本编辑程序. Vi不是排版程序,只是一个纯粹的文本编辑程序. Vi是全屏幕文本编辑器,它没有菜单,只有命令. Vi不是基于窗口的,所以, ...