placeholder 兼容 IE
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的更多相关文章
- IE9以下 placeholder兼容
//input placeholder兼容!(function ($, doc, win) { $.fn.placeholder = function () { var i = doc.createE ...
- placeholder兼容
<!------------placeholder兼容-------------><script type="text/javascript"> $( ...
- placeholder兼容方法（兼容IE8以上浏览器）
//placeholder兼容方法(兼容IE8以上浏览器) var JPlaceHolder = { //检测 _check: function () { return 'placeholder' i ...
- IE8 placeholder兼容+Password兼容
对于placeholder兼容问题 IE系列的大部分不兼容 使用JQ插件解决这个问题,确实用法很简单 jS下载地址http://www.ijquery.cn/js/jquery.placeholder ...
- placeholder在不同浏览器下的表现及兼容方法 placeholder兼容
1.什么是placeholder? placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...
- ☆☆☆☆☆Placeholder兼容各大浏览器的例子☆☆☆☆☆
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- input placeholder兼容ie10以下
代码如下: ,) < ) { $('input[placeholder]').each(function(){ var input = $(this); $(input).val(input.a ...
- input placeholder 兼容问题
placeholder是html5出的新特性,ie9以下是不兼容的, 那么为了兼容ie9 我们需要对他做处理 //jq的处理方式$(function(){ jQuery('[placeholder] ...
- ie9 placeholder兼容
.phcolor{ color:#999;}//css样式 function isPlaceholer(){ var input = document.createElement("inpu ...
随机推荐
- class如何命名更规范
相信写css的人都会遇到下面的问题: 糟糕,怎么命名这个class,好像不太贴切,要是冲突了怎么办,要不要设计成通用一点... 而改别人css代码的时候则会一直有个疑问:这个class到底是只在这个地 ...
- TcpClient
public class TcpClientSession { protected TcpClient Client { get; set; } /// <summary> /// 远程地 ...
- WireShark抓包软件的使用
在大学的时候学习的计算机网络的具体的知识,也使用过wireshark去抓取一些网络的封包用来分析,但是都没能系统的写一篇博客,今天总结一下吧. wireshark介绍 wireshark的官方下载网站 ...
- jquery1.11做的改变
$('#btn-checkall').on('click', function(){}); //替换为 $('#btn-checkall-parent-static-node').on('click' ...
- Android 自定义EditText实现粘贴，复制，剪切的监听
package com.dwtedx.qq.view; import android.annotation.SuppressLint; import android.content.Context; ...
- 判断mysqli函数里的sql语句是否有错和影响行数
<?php $mysqli=@new mysqli("localhost", "root", "123456", "xsph ...
- css中element element和element>element选择器的区别
就是这样的选择器: 比如html中有这样一段布局: <div> <p>我是一个段落</p> </div> 这时你用div p{background:ye ...
- [Django] html 前端页面jQuery、图片等路径加载问题
严格的说这个话题应该属于一个html前端路径加载问题.为了实现一个局部更新页面的功能,简单了解了一下Ajax.Ajax是一个为了实现浏览器和服务器异步通信功能的模块.严格来说不是一个新的语言,只是JS ...
- 用U盘装win7/XP系统的操作
现在上网本越来越流行了,但是上网本是没有光驱的,那如何给上网本装系统就成了一个难题,其实不仅仅不带光驱的笔记本用户愁怎么装系统,那些没有光驱的台式机用户也愁.为了给这类用户提供方便,笔者今天以上网本装 ...
- Android 使用PopupWindow实现弹出菜单
在本文当中,我将会与大家分享一个封装了PopupWindow实现弹出菜单的类,并说明它的实现与使用. 因对界面的需求,android原生的弹出菜单已不能满足我们的需求,自定义菜单成了我们的唯一选择,在 ...