首先,判断浏览器是否支持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. VS2010调试速度很慢

    1.使用vs2010,感觉速度越来越慢.重新设置了vs2010的环境(在vs2010命令提示符下,执行devenv.exe /resetuserdata),居然解决了这个问题,速度跑的很好.网上有人说 ...

  2. Divide and conquer:Telephone Lines(POJ 3662)

    电话线 题目大意:一堆电话线要你接,现在有N个接口,总线已经在1端,要你想办法接到N端去,电话公司发好心免费送你几段不用拉网线,剩下的费用等于剩余最长电话线的长度,要你求出最小的费用. 这一看又是一个 ...

  3. Windows下批处理执行MySQL脚本文件

    转载至http://my.oschina.net/u/660932/blog/117929 一. @echo offSetlocal enabledelayedexpansion::CODER BY ...

  4. codeforces gym 100286 I iSharp (字符串模拟)

    题目链接 给定一个字符串.输入是int& a*[]&, b, c*; 输出是 int&&[]* a;int& b;int&* c; 输入格式里逗号后面一 ...

  5. 安装Odoo9出现的could not execute command "lessc"问题

    解决方案: apt-get install node-less

  6. java常用工具类(java技术交流群57388149)

    package com.itjh.javaUtil;   import java.util.ArrayList; import java.util.List;   /** * * String工具类. ...

  7. @RequestMapping详解

    简介: @RequestMapping RequestMapping是一个用来处理请求地址映射的注解,可用于类或方法上.用于类上,表示类中的所有响应请求的方法都是以该地址作为父路径. RequestM ...

  8. A Horrible Poem(bzoj 2795)

    Description 给出一个由小写英文字母组成的字符串S,再给出q个询问,要求回答S某个子串的最短循环节.如果字符串B是字符串A的循环节,那么A可以由B重复若干次得到. Input 第一行一个正整 ...

  9. 你缺什么(codevs 2928)

    2928 你缺什么  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解       题目描述 Description 继“你幸福吗”之后,央视又推出了“ ...

  10. 关于内存管理/set/get方法

    MRC状态下 1 任何继承NSObject的对象,存放于堆控件中,都需要手动管理内存 .2 基本数据类型放到栈中,对象放到堆空间中,内存是有系统管理的.(int\float\enum\struct) ...