<!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. jquery自定义函数

    /** *jquery 的拓展方法 *//** * 给btn 添加去除disabled */$.fn.disabled = function() { $(this).each(function(ind ...

  2. vmware安装CentOS开发环境搭建

    CentOS开发环境搭建 一.安装系统 新建虚拟机   2.选择“自定义(高级)”,并点击[下一步] 3.选择虚拟机硬件兼容性,并点击[下一步] 4.选择“稍后安装操作系统”,并点击[下一步] 5.选 ...

  3. Python中字符串的处理方法

    1.字符串 word = '字符串' sentence = "这是一个句子." paragraph = """这是一个段落, 可以由多行组成" ...

  4. java解析HTML之神器------Jsoup

    背景:公司项目要对接第三方商城的商品到自己的商城来卖,商品详情给了个链接url,因为对方的商品详情有他们的物流说明,售后信息,所以要求去掉这部分的代码 @Test public void getIte ...

  5. ResNet网络再剖析

    随着2018年秋季的到来,提前批和内推大军已经开始了,自己也成功得当了几次炮灰,不过在总结的过程中,越是了解到自己的不足,还是需要加油. 最近重新复习了resnet网络,又能发现一些新的理念,感觉很f ...

  6. Tkinter模块：Grid几何管理器

    Tkinter模块是Python的标准库模块之一,也是使用Python语言进行图形化用户界面(GUI)开发的基础. 本文介绍一下Tkinter模块的Grid几何管理器. 使用VB.MFC进行GUI开发 ...

  7. 循环输出ViewBag集合

    <tr>            <td>                权限分配:            </td>            <td>   ...

  8. 使用datepicker和uploadify的冲突解决（IE双击才能打开附件上传对话框）

    在开发的过程当中,IE的兼容无疑是我们的一块绊脚石,在我们使用的如期的datepicker插件和使用上传附件的uploadify插件的时候,两者就产生冲突,只要点击过时间的插件,uploadify上传 ...

  9. 【译】REM vs EM - 世纪之争

    原文链接:https://zellwk.com/blog/rem-vs-em/ 在网络上排版的最佳做法之一是使用像rem和em这样的相对单位. 问题是,你应该使用哪个? 在rem支持者和em支持者之间 ...

  10. 组合，Mixin，类、类对象、实例对象

    1.组合,将几个横向关系的组合在一起.所谓的组合就是将类的实例化放到新类里面,那么就将旧类组合进去了. class Turtle: def __init__(self, x): # 注意 init 前 ...