这是我的第一个博客,还是写点正经的,希望对做前端朋友有所帮助。
最近在做的项目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来完成兼容的更多相关文章

  1. jquery.placeholder.min.js让吃屎的IE浏览器支持placeholder去吧

    描述:现在都是HTML5时代了,所有的浏览器都支持placeholder,唯独IE不支持.现在我们有了这款插件,IE下终于可以支持了!  图片展示:   兼容浏览器:IE6+/Firefox/Goog ...

  2. 使ie8正常支持placeholder

    在IE8下测试,发现一个问题placeholder不被支持,下面是解决IE支持placeholder的方法,本文引用的jquery是1.12.0测试通过,先引用jquery <script ty ...

  3. 在IE8等不支持placeholder属性的浏览器中模拟placeholder效果

    placeholder是一个很有用的属性,可以提示用户在input框中输入正确的内容,但是IE8以及IE8一下的浏览器不支持该属性,我们可以使用js来模拟相似的效果.下面直接上代码: <!doc ...

  4. 移动端日历选择控件(支持Zepto和JQuery)

    移动端日历选择控件(支持Zepto和JQuery) <!DOCTYPE html> <html> <head> <meta charset="utf ...

  5. 让IE8支持placeholder

    $(function(){ if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder $('[placeholder]').focus(function( ...

  6. max-height,min-height在IE下不支持的解决方法

    max-height,min-height在IE下不支持的解决方法 max-width:160px; max-height:160px; _width:expression(this.width &g ...

  7. 当浏览器不支持placeholder,所执行的函数

    $(function(){ //判断浏览器是否支持placeholder属性 supportPlaceholder='placeholder'in document.createElement('in ...

  8. 简单实用的下拉菜单(CSS+jquery)

    原文 简单实用的下拉菜单(CSS+jquery) 没什么可以说的,直接上例子 html+jquery代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...

  9. 让ie8支持 placeholder 属性

    一.  ie8支持 placeholder 属性 /* * ie8支持 placeholder 属性 */ $(function(){ if( !('placeholder' in document. ...

随机推荐

  1. notepad++ 正则表达式(记录)

    删除操作notepad++去掉行尾空格或逗号查找目标:\s+$ (或,+$)替换为空Note: 以换行符结尾表示是$\r\n,而不是\r\n$ notepad++删除文本文件里面的空白行查找目标:^[ ...

  2. Dojo入门:dojo中的事件处理

      JS为DOM添加事件 在原生的环境下,为DOM添加事件处理函数有多种方法: <input type="button" name="btn" value ...

  3. mybatis整合spring,使用org.mybatis.spring.mapper.MapperScannerConfigurer扫描出现问题

    <!-- 加载配置文件 --> <context:property-placeholder location="classpath:db.properties" ...

  4. PHP操作redis部分命令

    //连接本地的 Redis 服务 $redis = new Redis(); $redis->connect('127.0.0.1', 6379); $redis->auth('12345 ...

  5. 【转】WEB技术发展简史

    [转]WEB技术发展简史 一.Web技术发展的第一阶段——静态文档 第一阶段的Web,主要是用于静态Web页面的浏览.用户使用客户机端的Web浏览器,可以访问Internet上各个Web站点,在每一个 ...

  6. docker 安装 nexus

    docker pull sonatype/nexus3 用docker-compose 部署 创建目录 /usr/local/docker/nexus 在目录下 创建docker-compose.ym ...

  7. 超详细的CentOS8Linux新功能介绍 镜像iso下载安装

    在这文章中,我们会使用图解的方式演示 CentOS 8 的安装方法. CentOS8中软件和系统管理请参照https://www.cnblogs.com/fusheng11711/p/11809963 ...

  8. Excel使用技巧大全(超全)

    目录 Excel 使用技巧集锦 --163 种技巧 一. 基本方法 1. 快速选中全部工作表 2. 快速启动 Excel 3. 快速删除选定区域数据 4. 给单元格重新命名 5. 在 Excel 中选 ...

  9. FPGA —— LED控制

    第一次接触新东西的时候,难免会磕磕碰碰,不过遇到问题不要着急,慢慢来.原因总归是我们自己引起的,一步步找到问题的根源,然后彻底解决它,避免下次再犯. 在开始之前先分享一下工具:(Quartus II ...

  10. Neo4j下载与使用

    Neo4j 官网 : https://neo4j.com/ Neo4j 国内: http://neo4j.com.cn/topic/5b003eae9662eee704f31cee http://we ...