由于placeholder是H5新属性,IE9及以下都不支持

解决办法:给input添加一个背景图,背景图里面添加placeholder内容,当焦点落在输入框中,背景图隐藏,即可做出类似的效果

代码:

//引入jQuery框架
$(function(){
if(!('placeholder' in document.createElement('input'))){
jQuery(':input[placeholder]').each(function(index, element) {
var self = $(this), txt = self.attr('placeholder');
self.wrap($('<div></div>').css({position:'relative',float:'left', zoom:'1', border:'none', background:'none', padding:'none', margin:'none'}));
var pos = self.position(), h = self.outerHeight(true), paddingleft = self.css('padding-left');
var holder = $('<span></span>').text(txt).css({'position':'absolute',
'left':pos.left, 'top':pos.top,
'height':h, 'line-Height':h+'px',
'paddingLeft':paddingleft, 'color':'#aaa'}).appendTo(self.parent());
self.focusin(function(e) {
holder.hide();
}).focusout(function(e) {
if(!self.val()){
holder.show();
}else{
holder.hide();
}
});
holder.click(function(e) {
holder.hide();
self.focus();
});
});
}
});

  

placeholder兼容性问题的更多相关文章

  1. 解决input 中placeholder的那些神坑

    **昨天后台小哥哥提到placehold无法显示问题,我这边总结一下,顺便写个小文章分享给大家..** ============================================== 一 ...

  2. 解决input标签placeholder属性浏览器兼容性问题的一种方法

    为文本框input添加文字输入提示,H5为input提供了一个placeholder属性.在支持H5的浏览器中,用此属性设置输入提示,简单方便,但是对于IE8以下版本,都不支持placeholder属 ...

  3. placeholder右对齐的写法,兼容性比较高的一种方法

    placeholder右对齐的写法,如果你不考虑移动端的话,完全可以使用text-align:right,不过如果考虑移动端的话,在有一些手机上,即使你写了text-align:right,place ...

  4. 对于placeholder浏览器兼容性(包括密码输入框)解决办法

    将以下脚本和样式引入你的页面(对于密码输入框,要设置ID属性值): <script type="text/javascript"> $(function () { // ...

  5. input placeholder属性IE、360浏览器兼容性问题

    效果:http://hovertree.com/texiao/jquery/43/ 效果二:http://hovertree.com/texiao/jquery/43/1/ 请在IE中体验. 1.创建 ...

  6. placeholder的兼容性探索之路

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. placeholder在IE8中兼容性问题解决

    placeholder是HTML5中的一个属性,可以在文本框中设置placeholder属性来显示一些提示性的文字,但对IE10以下的浏览器不支持,下面方法可以让placeholder能够使用在IE1 ...

  8. 解决HTML5中placeholder属性兼容性的JQuery插件

    //调用方法 $(function () {   $(".pHolder").jason(); }); //HTML代码 <input type="text&quo ...

  9. IE8 placeholder不支持的兼容性处理

    引入 <script type="text/javascript" src="<%=path%>/common/js/jquery/jquery.min ...

随机推荐

  1. python theading线程开发与加锁、信号量、事件等详解

    线程有2种调用方式,如下: 直接调用 import threading import time def sayhi(num): #定义每个线程要运行的函数 print("running on ...

  2. Matlab-9:中心差分方法解常微分算例(SOR完整版)

    函数文件: function [x,n,flag]=sor(A,b,eps,M,max1) %sor函数为用松弛迭代法求解线性方程组 %A为线性方程组的系数矩阵 %b为线性方程组的常数向量 %eps为 ...

  3. 深入Spring Boot: 怎样排查 java.lang.ArrayStoreException

    java.lang.ArrayStoreException 分析 这个demo来说明怎样排查一个spring boot 1应用升级到spring boot 2时可能出现的java.lang.Array ...

  4. P标签莫名有了margin-top值的原因

    p标签默认 -webkit-margin-after: 1em; -webkit-margin-before: 1em;元素上下边距数值为1倍字体高度 设置-webkit-margin-after: ...

  5. ActiveMQ topic 普通订阅和持久订阅

    直观的结果:当生产者向 topic 发送消息, 1. 若不存在持久订阅者和在线的普通订阅者,这个消息不会保存,当普通订阅者上线后,它是收不到消息的. 2. 若存在离线的持久订阅者,broker 会为该 ...

  6. js正则表达式 replace替换url的参数

    /* 定义替换对象键值 */var setReferArgs = function(){    var referArgs = new Object();    referArgs['#userID\ ...

  7. 【用例管理】用testng的groups管理用例

    一.需求: 测试时经常有两种场景,第一种是冒烟测试的小部分用例:一类是全部用例. 二.针对第一种运行部分的用例,可以用groups来管理 package com.testcases; import o ...

  8. laravel 查询指定字段的值

    $this->model->where('id',$id)->value('user');

  9. Ubuntu下怎么编译并运行C、C++和Pascal语言?

    很多同学在安装了Ubuntu的环境后,发现在Windows下的许多东西都打不开了,但是用网站上的在线IDE又不是很方便. 所以,ljn教你如何在Ubuntu下编译并运行C.C++和Pascal. 一. ...

  10. this&super两个关键字的意义和用法

    "this",作为一个特殊的关键字,它的规则如下: 1.可以表示构造函数传递.this(a,b)表示调用另外一个构造函数.这里面的this就是一个特殊语法,不是变量,没有什么类型. ...