由于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. ACM-ICPC 2018 南京赛区网络预赛Skr

    题意:求本质不同的回文子串的和 题解:先构造pam,然后根据pam的原理(ch表示在该节点表示的回文串两侧加上该字符)对于每个节点维护一个表示该节点字符串的值,加起来即可 //#pragma GCC ...

  2. Oracle Log Block Size

    Although the size of redo entries is measured in bytes, LGWR writes the redo to the log files on dis ...

  3. Angular4.x 引入第三方 JS

    引入 Jquery 使用 angular-cli 新建 angular项目 1.安装 jquery npm install jquery --save 2..angular-cli.json 中引入 ...

  4. 解决linux环境下qt groupbox 边框不显示问题

    ps:实践是检验真理的唯一标准真的是没错,以为很简单一件事情,往往被自己搞的很复杂,这里记录下 在windows环境中Qt创建一个groupbox自动显示边框, 效果如下 然而在linux环境中Qt创 ...

  5. Nginx反向代理配置教程(php-fpm)

    1.安装nginx http://www.cnblogs.com/lsdb/p/6543441.html 2.安装php-fpm yum install -y php-fpm 3.配置Nginx反向代 ...

  6. [转]关于ReentrantLock中线程读某个变量是否需要加锁

    我在使用ReentrantLock类对变量进行多线程累加时,调用了lock()和unlock()方法,但读取该变量时我未加锁,结果是能正确执行,代码如下: public class Main { pr ...

  7. MFC消息-自定义消息

    转:http://blog.csdn.net/penpenandtongtong/article/details/18598907 像MFC的窗口发送消息,可以进行自定义的动作行为,因此很多时候非常有 ...

  8. get url img

    selenium     1● 了解selenium 这个是做 web页面测试,模拟用户测试   =====> pip install selenium 安装     2● django 用于接 ...

  9. Win10系列:JavaScript综合实例3

    实现主页面的功能之后,接下来实现分类页面.分类页面中显示一种菜肴类别的详细信息,包括类别名称.图片.描述信息以及属于该类别的一些菜肴.在pages文件夹中添加一个名为classDetail的文件夹,并 ...

  10. angular 我看过的技术书籍

    13年我在悠唐网络做前端开发时,当时仿豌豆荚一个sdk 发布应用界面的时候,看到代码用到奇怪的ng-,当时查了下是用angular,从那时开始慢慢接触angular,之后进入逸橙官网组使用angula ...