<!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. c# Winfrom窗体事件中启用多线程 并用子线程修改窗体里面的属性

    昨天一个朋友问我一个问题,需求是 this.textBox1.Text = "睡眠前"; Thread.Sleep(1000); this.textBox1.Text = &quo ...

  2. Python输入数组（一维数组、二维数组）

    一维数组: arr = input("") //输入一个一维数组,每个数之间使空格隔开 num = [int(n) for n in arr.split()] //将输入每个数以空 ...

  3. 按住CTRL多选，按住shift连选的实现

    <tr class="address" v-for="(counts, index) in counts" :key="index" ...

  4. python pexpect包的一些用法

    转自:https://www.jianshu.com/p/cfd163200d12 mark一下,原文中写的挺详细

  5. webpack 大概

    entry output loader: rules: [ {test:匹配文件格式,  use: 使用的loader}, {test:匹配文件格式,  use: 使用的loader}, ...//l ...

  6. AOP面向切面编程JAVA动态代理实现用户权限管理（实现篇）

    java动态代理机制的功能十分强大,使用动态代理技术能够有效的降低应用中各个对象之间的耦合紧密程度,提高开发的效率以及程序的可维护性,事实上Spring AOP就是建立在Java动态代理的基础之上.其 ...

  7. linux中常见的命令

    linux 中的命令非常多,但是玩过linux的人也从来不会因为Linux的命令如此之多而烦恼,我们只需要掌握其中常见的命令即可,可以在使用时去找man,会帮助你解决不少问题.下面就列出一些常见的li ...

  8. Spring Cloud的应用程序—上下文服务

    Spring Boot对于如何使用Spring构建应用程序有一个看法:例如它具有常规配置文件的常规位置,以及用于常见管理和监视任务的端点.Spring Cloud建立在此之上,并添加了一些可能系统中所 ...

  9. 文件6. 查找替换.txt文本文件中的内容

    servlet实现对文本文件的查找替换 .jsp界面 <form> <table> <tr> <td>选择文本文件:</td> <td ...

  10. 第十四周翻译-《Pro SQL Server Internals, 2nd edition》

    <Pro SQL Server Internals, 2nd edition> 作者:Dmitri Korotkevitch 翻译:赖慧芳 译文: 设计和优化索引 定义一种应用于所有地方的 ...