placeholder 是 html5 的新属性,仅支持 html5 的浏览器才支持 placeholder,目前最新的 FF、Chrome、Safari、Opera 以及 IE10 都支持,IE6-IE9 都不支持!

placeholder 在各个浏览器下基本都是淡灰色显示,不同的地方在于 FF 和 Chrome 中,输入框获得焦点时,placeholder 文字没有变化,只有当输入框中输入了内容时,placeholder 文字才会消失;而在 Safari 和 IE10 下,当输入框获得焦点时,placeholder 文字便立即消失。

js 解决方法:

if( !("placeholder" in document.createElement("input")) ){
$("input[placeholder],textarea[placeholder]").each(function(){
var that = $(this),
text= that.attr("placeholder");
if(that.val()===""){
that.val(text).addClass("placeholder");
}
that.focus(function(){
if(that.val()===text){
that.val("").removeClass("placeholder");
}
})
.blur(function(){
if(that.val()===""){
that.val(text).addClass("placeholder");
}
})
.closest("form").submit(function(){
if(that.val() === text){
that.val("");
}
});
});
}

在页面里引入 jquery,再执行上面这段代码即可!

例子:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>placeholder兼容</title>
</head> <body>
<input type="text" placeholder="我是提示文字"> <!-- 这里 src 改成你自己的 jquery 路径 -->
<script type="text/javascript" src="../scripts/common/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
if( !('placeholder' in document.createElement('input')) ){ $('input[placeholder],textarea[placeholder]').each(function(){
var that = $(this),
text= that.attr('placeholder');
if(that.val()===""){
that.val(text).addClass('placeholder');
}
that.focus(function(){
if(that.val()===text){
that.val("").removeClass('placeholder');
}
})
.blur(function(){
if(that.val()===""){
that.val(text).addClass('placeholder');
}
})
.closest('form').submit(function(){
if(that.val() === text){
that.val('');
}
});
});
}
});
</script>
</body>
</html>

到此,placeholder 兼容问题已解决!

placeholder 兼容 IE的更多相关文章

  1. IE9以下 placeholder兼容

    //input placeholder兼容!(function ($, doc, win) { $.fn.placeholder = function () { var i = doc.createE ...

  2. placeholder兼容

    <!------------placeholder兼容-------------><script type="text/javascript">    $( ...

  3. placeholder兼容方法(兼容IE8以上浏览器)

    //placeholder兼容方法(兼容IE8以上浏览器) var JPlaceHolder = { //检测 _check: function () { return 'placeholder' i ...

  4. IE8 placeholder兼容+Password兼容

    对于placeholder兼容问题 IE系列的大部分不兼容 使用JQ插件解决这个问题,确实用法很简单 jS下载地址http://www.ijquery.cn/js/jquery.placeholder ...

  5. placeholder在不同浏览器下的表现及兼容方法 placeholder兼容

    1.什么是placeholder?    placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...

  6. ☆☆☆☆☆Placeholder兼容各大浏览器的例子☆☆☆☆☆

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. input placeholder兼容ie10以下

    代码如下: ,) < ) { $('input[placeholder]').each(function(){ var input = $(this); $(input).val(input.a ...

  8. input placeholder 兼容问题

    placeholder是html5出的新特性,ie9以下是不兼容的, 那么为了兼容ie9  我们需要对他做处理 //jq的处理方式$(function(){ jQuery('[placeholder] ...

  9. ie9 placeholder兼容

    .phcolor{ color:#999;}//css样式 function isPlaceholer(){ var input = document.createElement("inpu ...

随机推荐

  1. ios消息的交互方式

    注意这些都是界面回传(即从第二个界面传到第一个界面,从第一个界面传到第二个界面的时候用第二个界面的属性即可)   iOS消息的交互方式有4种,分别为:通知,代理,block,kvo 现在我们对这个4中 ...

  2. js学习心得(一)(菜鸟)

    js基础已经打了好几次了,慕课跟着学了一遍,视频看了一些,还读了诸如 jsdom艺术,js精粹以及锋利jq(没读完). 这次再次重头读并写一遍代码,工具书是js,查缺补漏高级程序设计第二版,犀牛书有点 ...

  3. thinkphp批量删除的实现

    今天自己在写后台的时候需要把以前上传的测试文章全部删除掉,但是利用 [操作]里面的一个个删除比较慢,因此想出一个批量删除的解决方案. 首先在前端页面里面建立一个表单,这个表单是把你选中的单选按钮提交到 ...

  4. LSD-FET430UIF与MSP-FET430UIF

    成功的破解了没人研究的东西很有成就感!世界需要这样的人!!!LSD-FET430UIF与MSP-FET430UIF?什么是MSPF149?网上查了很多这方面的资料,都没有,最后凭借我阅读PDF的精神和 ...

  5. rabbitmq问题之HTTP access denied: user 'guest' - User can only log in via localhost

    问题: 昨天安装rabbitmq(3.3.4版本)服务,并启用rabbitmq_management插件去管理rabbitmq服务,但是在访问管理界面使用guest用户登录时出现login faile ...

  6. H面试程序(29):求最大递增数

    要求:求最大递增数 如:1231123451 输出12345 #include<stdio.h> #include<assert.h> void find(char *s) { ...

  7. docker 数据管理3

    实际应用: 第一个容器使用: docker run -itd -v /data/:/data1 centos  bash // -v 用来指定挂载目录, 后面的容器使用之前的容器数据卷 docker: ...

  8. openstack中文文档

    http://www.openstack.cn/p392.html   openStack Hacker中文文档 http://docs.mirantis.com/fuel-dev/develop/a ...

  9. Spring、使用注解方式装配对象(@Resource、@Autowired)

    使用手工注解方式有两种方式@Resource.@Autowired 首先,引入注解所使用的Jar包  :common-annotations.jar 然后在beans.xml中加入命名空间空间 xml ...

  10. 佩特来项目经验小集合(2)___组合查询存储过程,报错 &quot;varchar JBID=&#39;&#39; 转换成数据类型 int 时失败&quot;

       今天写一个组合查询的存储过程遇到这样一个问题:在将 varchar 值 'SELECT * FROM View_DLS_WXJD_Customer WHERE 1=1 and JBID ='' ...