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. ...
随机推荐
- 慕课网_Java入门第三季
第1章 异常与异常处理 1-1 Java异常简介 (06:50) 1-2 Java中使用try..catch..finally实现异常处理 (05:08) import java.util.Input ...
- 简单的servlet上传文件
boolean multipartContent = ServletFileUpload.isMultipartContent(request);if (multipartContent==true) ...
- string中getline,cin的方法getline(),get总结
一.string中的getline不是string的成员函数,属于全局函数,使用需要include<string>,有两个重载版本: 函数原型参见:http://www.cplusplus ...
- Egret入门学习日记 --- 第七篇(书中 3.9节 内容)
第七篇(书中 3.9节 内容) 好,今天就来看下 3.9节 的内容. 第一点: 昨天就已经搞定了. 第二点: 也包括在昨天的内容了. 第三点: 如果在构造函数里直接引用组件,就会挂掉. 但是把位置变化 ...
- python学习之生成器
4.6 生成器Generrator 生成器本质就是迭代器.python社区生成器与迭代器是一种. 生成器与迭代器的唯一区别:生成器是我们自己用python代码构建的 4.6.1生成器初识 py ...
- SpringCloud 和 Dubbo 有哪些区别?
首先,他们都是分布式管理框架. dubbo 是二进制传输,占用带宽会少一点.SpringCloud是http 传输,带宽会多一点,同时使用http协议一般会使用JSON报文,消耗会更大. ...
- 零基础学习前端1-1配置node及npm环境变量
零基础学习前端1-1配置node及npm环境变量 ## 1-1配置node及npm环境变量 首先:下载node 可以直接去官方网站下载 1.首先从官网下载安装包 https://nodejs.org/ ...
- [Python3] 027 常用模块 time
目录 time 1. 时间戳 2. UTC 时间 3. 夏令时 4. 时间元组 5. 举例 5.1 例子1 例子2 例子3 例子4 例子5 例子6 例子7 time 1. 时间戳 一个时间表示,根据不 ...
- 开发维护中遇到问题---eclipse、发版问题
1.jar包冲突问题, [服务器启动service服务器,tomcat也已启动]然后浏览器访问,会出现这样子的问题现象:tomcat什么的启动成功,但是访问时会出现404: 解决方法:先停掉tomca ...
- 使用rsync在linux(服务端)与windows(客户端)之间同步
说明: 1.RsyncServer服务端 系统:CentOS 6.8 IP地址:192.168.247.141 2.Rsync客户端 系统:Windows10 实现目的: Rsync客户端同步服务端/ ...