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. ...
随机推荐
- 阶段3 2.Spring_06.Spring的新注解_6 Qualifier注解的另一种用法
复制上面的数据源到下面改改名字 现在就是有两个数据源 创建一个eesy02的数据库 找到sql语句再创建Account表 现在就相当于有连个库一个eesy一个是eesy02这连个库. account里 ...
- ubuntu中将本地文件上传到服务器
(1)在本地的终端下,而不是在服务器上.在本地的终端上才能将本地的文件拷入服务器. (2) scp -r localfile.txt username@192.168.0.1:/home/userna ...
- 转载-c++深拷贝和浅拷贝
转载自:https://blog.csdn.net/u010700335/article/details/39830425 C++中类的拷贝有两种:深拷贝,浅拷贝:当出现类的等号赋值时,即会调用拷贝函 ...
- 哈希表 HashTable(又名散列表)
简介 其实通过标题上哈希表的英文名HashTable,我们就可以看出这是一个组合的数据结构Hash+Table. Hash是什么?它是一个函数,作用可以通过一个公式来表示: index = HashF ...
- video标签在移动端的一些属性值设置
<video x5-video-orientation="portraint" src="" loop x-webkit-airplay="al ...
- aliyun搭博客从零到一
一.基础环境 lnmp 1台负载均衡SLB 2台ECS 1台 RDS 二.lnmp搭建 1.#配置nginx的yum仓库 2.#yum install -y nginx ...
- 小型自动化运维工具pssh和传输工具rsync
一.简单介绍 1.pssh全称是parallel-ssh,基于Python编写的并发在多台服务器上批量执行命令的工具.包括pssh,pscp,prsync,pnuke和pslurp.该项目包括pssh ...
- Python 命令行解析模块 —— argparse
argparse是python标准库里面用来处理命令行参数的库,基本使用步骤如下: 1.import argparse 导入模块 2.parser = argparse.ArgumentPars ...
- 【嵌入式开发】树莓派+官方摄像头模块+VLC串流实时输出网络视频流
sudo apt-get update sudo apt-get install vlc sudo raspivid -o - -t 0 -w 640 -h 360 -fps 25|cvlc -vvv ...
- LPVOID 指针 转 int
1 DWORD WINAPI SockUDP::RecvThread(LPVOID lparam){ //套接字 正确:int sock= *(int*)(lparam); 错误:int ...