<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.input-item {
position: relative;
margin: 10px;
}
.pwd-place {
position: absolute;
top: 0;
left: 72px;
width: 100%;
height: 100%;
font-size: 12px;
}
</style>
</head>
<body>

<form action="#">
<div class="input-item">
<label for="userName">用户名：</label>
<input class="username" id="userName" type="text" placeholder="请输入用户名">
</div>
<div class="input-item">
<label for="pwd">密码：</label>
<input class=" password" id="pwd" type="password" placeholder="请输入密码">
<span class="pwd-place"></span>
</div>

</form>
<script src="jquery-1.11.3.js"></script>
<script>
function placeholder(el){

function isPlaceholer(){
var input = document.createElement("input");
return "placeholder" in input;
}

var $el = $(el);
if( isPlaceholer()==false && !('placeholder' in document.createElement('input')) ){

$('input[placeholder],textarea[placeholder]').each(function(){
var that = $(this),
text= that.attr('placeholder');
if(that.val()===""){
if(that.attr("type") == "password"){
$el.html("请输入密码");
}else {
that.val(text).addClass('placeholder');
}
}
that.focus(function(){
if($el.html() == text){
$el.html("");
}
if(that.val()===text) {
that.val("").removeClass('placeholder');

}
})
.blur(function(){
if(that.val()==="") {
if (that.attr("type") == "password") {
$el.html("请输入密码");

}else {
that.val(text).addClass('placeholder');
}
}
})
.closest('form').submit(function(){
if(that.val() === text){
that.val('');
}
});
});
}
}
$(document).ready(function() {
placeholder(".pwd-place")
});
</script>
</body>
</html>

ie8的input的placeholder不显示的解决bug的更多相关文章

  1. iphone H5 input type="search" 不显示搜索 解决办法

    H5 input type="search" 不显示搜索 解决办法 H5 input type="search" 不显示搜索 解决方法 在IOS(ipad iP ...

  2. H5 input type="search" 不显示搜索 解决方法

    在IOS(ipad iPhone等)系统的浏览器里打开H5页面.如下写法: <input type="search" name="search” id=" ...

  3. input 的 placeholder属性在IE8下的兼容处理

    placeholder是input标签的新属性,在使用的时候有两个问题: 1.IE8 下不兼容 处理思路: 如果浏览器不识别placeholder属性,给input添加类名placeholder,模仿 ...

  4. 类似于input输入框placeholder的效果，兼容ie8

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

  5. js解决IE8、9下placeholder的兼容问题

    由于placeholder是html5的新属性,在IE8.IE9下是不能显示的,有兼容性问题. 解决思路: 1.判断目前浏览器是否支持placeholder属性 2.若不支持,则将type=" ...

  6. 兼容IE8的input输入框的正确使用姿势

    input是一个很常见的标签,大家使用的也很常见,但是我在具体的工作中发现要想完美的使用这个标签还是任重而道远,下面是我碰到的几个问题. 1.我们在使用这个标签的时候会习惯的加上placeholder ...

  7. H5新特性 input type=date 在手机上默认提示显示无效解决办法

    目前PC端对input 的date类型支持不好,我试下来的结果是只有chrome支持.firefox.IE11 都不支持.而且PC端有很多日历控件可供使用.就不去多考虑这点了. 那么在移动端的话,io ...

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

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

  9. IE8 不支持html5 placeholder的解决方案

    IE8不支持html5 placeholder的解决方法. /** * jQuery EnPlaceholder plug * version 1.0 2014.07.01戈志刚 * by Frans ...

随机推荐

  1. Java获取客户端真实IP

    一般情况下,我们可以使用 request 的 getRemoteAddr()  方法获取客户端实际 IP ,但是使用反向代理后,我们使用 getRemoteAddr() 是无法获取真实的  IP 的. ...

  2. linux链接及文件互相上传下载

    若排版紊乱可查看我的个人博客原文地址 基本操作 本篇博客主要介绍如何去链接远程的linux主机及如何实现本地与远程主机之间文件的上传下载操作,下面的linux系统是CentOS6.6 链接远程linu ...

  3. 【转】forbids in-class initialization of non-const static member不能在类内初始化非const static成员

    转自:forbids in-class initialization of non-const static member不能在类内初始化非const static成员 今天写程序,出现一个新错误,好 ...

  4. eclipse安装反编译插件(附jad下载）

    eclipse安装反编译插件(附jad下载) 博客分类: eclipse   一.eclipse反编译插件Jadclipse jadclips插件网站:    http://jadclipse.sou ...

  5. css清除浮动方式总结

    1.通过父元素overflow:hidden,缺点:超出部分隐藏,不推荐使用 <!DOCTYPE html> <html lang="en"> <he ...

  6. gulp的使用(二)之gulpfile.js文件的配置

    Gulpfile.js是什么文件: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她, ...

  7. 玩转BLE(1)_Eddystone beacon

    1. 前言 你相信两条命令就可以把自己的破手机变成一个Beacon节点吗?不相信的话就接着往下看吧. 通过前几篇“蓝牙协议分析”相关的文章,特别是“蓝牙协议分析(3)_蓝牙低功耗(BLE)协议栈介绍” ...

  8. 易语言 - 模块 - 子程序 - 纯真IP数据库查询

    .版本 .支持库 spec .程序集 程序集1 .子程序 _启动子程序, 整数型, , 请在本子程序中放置易模块初始化代码 _临时子程序 () ' 在初始化代码执行完毕后调用测试代码 返回 () ' ...

  9. leetcode 第4题 Median of Two Sorted Arrays

    class Solution { public: double findMedianSortedArrays(vector<int>& nums1, vector<int&g ...

  10. iframe嵌套vue页面打开新窗口

    iframe嵌套vue页面时目录结构为下图: 此时出口文件指向index.html, 所以只需要用a标签动态拼接href, 并设置属性 target="_blank" ,即可在if ...