ie下不支持placeholder 用jquery来完成兼容
这是我的第一个博客,还是写点正经的,希望对做前端朋友有所帮助。
最近在做的项目placeholder不兼容ie,这个可以兼容IE的输入框的HTML新增的placeholder的显示
下面是代码:
$( document ).ready( function()
{
//ie下placeholder的兼容
function isPlaceholder(){
var input = document.createElement('input');
return 'placeholder' in input;
} if (!isPlaceholder()) {//不支持placeholder 用jquery来完成
$(document).ready(function() {
if(!isPlaceholder()){
$("input").not("input[type='password']").each(//把input绑定事件 排除password框
function(){
if($(this).val()=="" && $(this).attr("placeholder")!=""){
$(this).val($(this).attr("placeholder"));
$(this ).css("color","gray");
$(this).focus(function(){
if($(this).val()==$(this).attr("placeholder")) $(this).val("");
});
$(this).blur(function(){
if($(this).val()=="") $(this).val($(this).attr("placeholder"));
});
}
});
//对password框的特殊处理1.创建一个text框 2获取焦点和失去焦点的时候切换
var pwdField = $("input[type=password]");
var pwdVal = pwdField.attr('placeholder');
pwdField.after('<input id="pwdPlaceholder" type="text" value='+pwdVal+' autocomplete="off" />');
var pwdPlaceholder = $('#pwdPlaceholder');
pwdPlaceholder.show();
pwdPlaceholder.css("border","none");//样式改变
pwdPlaceholder.css("color","gray");
pwdField.hide(); pwdPlaceholder.focus(function(){
pwdPlaceholder.hide();
pwdField.show();
pwdField.focus();
}); pwdField.blur(function(){
if(pwdField.val() == '') {
pwdPlaceholder.show();
pwdField.hide();
}
}); }
}); }
});
ie下不支持placeholder 用jquery来完成兼容的更多相关文章
- jquery.placeholder.min.js让吃屎的IE浏览器支持placeholder去吧
描述:现在都是HTML5时代了,所有的浏览器都支持placeholder,唯独IE不支持.现在我们有了这款插件,IE下终于可以支持了! 图片展示: 兼容浏览器:IE6+/Firefox/Goog ...
- 使ie8正常支持placeholder
在IE8下测试,发现一个问题placeholder不被支持,下面是解决IE支持placeholder的方法,本文引用的jquery是1.12.0测试通过,先引用jquery <script ty ...
- 在IE8等不支持placeholder属性的浏览器中模拟placeholder效果
placeholder是一个很有用的属性,可以提示用户在input框中输入正确的内容,但是IE8以及IE8一下的浏览器不支持该属性,我们可以使用js来模拟相似的效果.下面直接上代码: <!doc ...
- 移动端日历选择控件(支持Zepto和JQuery)
移动端日历选择控件(支持Zepto和JQuery) <!DOCTYPE html> <html> <head> <meta charset="utf ...
- 让IE8支持placeholder
$(function(){ if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder $('[placeholder]').focus(function( ...
- max-height,min-height在IE下不支持的解决方法
max-height,min-height在IE下不支持的解决方法 max-width:160px; max-height:160px; _width:expression(this.width &g ...
- 当浏览器不支持placeholder,所执行的函数
$(function(){ //判断浏览器是否支持placeholder属性 supportPlaceholder='placeholder'in document.createElement('in ...
- 简单实用的下拉菜单(CSS+jquery)
原文 简单实用的下拉菜单(CSS+jquery) 没什么可以说的,直接上例子 html+jquery代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...
- 让ie8支持 placeholder 属性
一. ie8支持 placeholder 属性 /* * ie8支持 placeholder 属性 */ $(function(){ if( !('placeholder' in document. ...
随机推荐
- 精通CSS:高级Web标准解决方案(第二版) 初读笔记
2.1 常用的选择器 1. 类型选择器 p { color: black; } 2. 后代选择器 blockquote p { padding-left: 2em; } 3. ID选择器 #in ...
- Go语言mgo使用情况
文重点介绍mgo使用,仅简单介绍mongodb. mongodb特性 mongdb简单介绍 注意: 上图已经告知我们mongo不支持事务,在开发项目应用时,想要保证数据的完整性请考虑关系型数据库( ...
- Elastic search中使用nested类型的内嵌对象
在大数据的应用环境中,往往使用反范式设计来提高读写性能. 假设我们有个类似简书的系统,系统里有文章,用户也可以对文章进行赞赏.在关系型数据库中,如果按照数据库范式设计,需要两张表:一张文章表和一张赞赏 ...
- Day05:循环问题 / 数组
循环嵌套 循环结构中包含完整的循环结构. 注意: 循环嵌套不限层次 各种循环语句都可以互相嵌套 内层循环中出现的break和continue只作用在内层循环中 外层循环循环一次 内层循环循环一遍 Ja ...
- How do I add a Foreign Key Field to a ModelForm in Django?
What I would like to do is to display a single form that lets the user: Enter a document title (from ...
- adb将Apk内置到系统中(system/priv-app)
https://blog.csdn.net/starhosea/article/details/78697007 so文件的处理是目前遇到过的问题.文章中解释了. 正文: 有时候我们在Android ...
- mybatis多对多级联查询
1.实体 package com.govmade.govdata.modules.sys.pojo; import java.util.List; import javax.persistence.T ...
- 运维日常之机房浪潮服务器硬盘红灯亮起,服务器一直响,raid磁盘红色。。。故障解决方法
按Ctrl+H进入到WebBIOS内,看见的错误如下所示: 错误是PDMissing,只不过维护的IBM服务器错误的磁盘不是第一块,而是第三块而已,不过坏哪块硬盘没有影响,重要的是错误的原因.这种错误 ...
- Qt - 基于TCP的网络编程
TCP(传输控制协议 Transmission Control Protocol) 可靠.面向数据流.面向连接 的传输协议.(许多应用层协议都是以它为基础:HTTP.FTP) 使用情况: 相比UDP ...
- Spring(五)--autowire自动装配和spel
autowire自动装配和spel 1.需要的实体类 2.需要的配置文件 <?xml version="1.0" encoding="UTF-8"?> ...