<!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. 【webpack学习笔记】a02-管理资源

    在webpack 中,各种资源要引入,要用到module配置,比如css/图片/字体等等. 例如: module.exports = { entry: './src/app.js', //这是入口文件 ...

  2. ios调用Google地图

    现在的ios版本一般只支持https协议,而引用谷歌地图API时只提供src="http://maps.google.cn/maps/api/js..",https协议无法使用,解 ...

  3. Ceph集群更换public_network网络

    1.确保ceph集群是连通状态 这里,可以先把机器配置为以前的x.x.x.x的网络,确保ceph集群是可以通的.这里可以执行下面的命令查看是否连通,显示HEALTH_OK则表示连通 2.获取monma ...

  4. c#多线程thread实例详解

    1. Thread线程启动 由于ThreadStart是一个委托,所以可以简化写法 static void Main(string[] args) { Console.WriteLine(" ...

  5. MSP430中断的一个细节问题

    关于中断标志: 从SPI发送一字节数据: void SPI_Set_SD_Byte(unsigned char txData) { UCB0TXBUF = txData; // 写入发送缓冲区 whi ...

  6. CSS效果：跑马灯按钮

    HTML代码 <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

  7. NLP相似度之tf-idf计算

    当然,在学习过程中也是参考了很多其他的资料,代码都是一行一行敲出来的. 一.将多个文件合并成一个文件,避免频繁的打开和关闭 import sys for line in sys.stdin: ss = ...

  8. 强大的css3库

    http://www.html5tricks.com/demo/css3-animate-css/index.html 关注微信小程序

  9. css+jquery 实现图片局部放大预览

    今天有时间开始动手,使用css+jquery实现了图片局部放大的组件,首先看看效果图: 界面设计思路如下: 1.两个div,左边放图片的缩略图 2.在左边缩略图鼠标移动的时候,区域(效果图中的网格) ...

  10. 3.14 unittest之skip

    3.14 unittest之skip 前言当测试用例写完后,有些模块有改动时候,会影响到部分用例的执行,这个时候我们希望暂时跳过这些用例.或者前面某个功能运行失败了,后面的几个用例是依赖于这个功能的用 ...