由于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. 关于react16.4——高阶组件(HOC)

    高阶组件是react中用于重用组件逻辑的高级技术.可以说是一种模式.具体来说呢,高阶组件是一个函数,它接收一个组件并返回一个新的组件. 就像这样, const EnhancedComponent = ...

  2. 牛客练习赛30-A/C

    链接:https://ac.nowcoder.com/acm/contest/216/A来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536K ...

  3. ECharts 报表事件联动系列二:柱状图,饼状图添加事件

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  4. Django之DjangoAdmin

    前言: 当我们启动1个Django程序的时候,在程序的settings.py配置文件默认注册了1个名为'django.contrib.admin'的APP程序,并且配置了默认路由映射关系url(r'^ ...

  5. 解决VS Code保存时候自动格式化

    VS code 保存会自动格式化.以前都是alt+shift+F格式化的,现在一保存就格式化 解决方式:找到你的VScode扩展,把JS-CS-HTML Formatter这个插件禁用就可以解决

  6. 百度AI认为最漂亮的中国女星是----范冰冰

    一.程序说明 1.1 程序说明 之前写调用百度AI接口的程序,然后刷到了两条明星的新闻,就想到了写个给明星颜值排下名的程序. 程序的关键点是两个,第一个是百度AI接口的调用这点其实直接使用早前实现的类 ...

  7. easyui中如何为validatebox添加事件(onblur、onclick等)

    在我们一般html的input标签,textbox事件可以直接使用onblur().onclick()事件,但是在easyui的validatebox没有onblur事件, 如果我们需要为valida ...

  8. Win10系列:UWP界面布局基础7

    2.附加属性 有一些XAML元素,其自身的属性大多是在其它的元素中声明和使用的,该元素本身却很少使用,这些在其他元素中声明和使用的属性被称为附加属性(Attached Properties).附加属性 ...

  9. 【oracle常见错误】ora-00119和ora-00132问题的解决方法

    oracle11g安装后,本地无法登录!前提:服务全部打开,监听也配置好了! win7 64位 oracle 11g 简单的sql命令: 先登录到sqlplus:sqlplus/nolog; 登录数据 ...

  10. 【2】IOS APP打包发布

    目的: 本文的目的是对IOS APP打包发布做了对应的介绍,大家可根据文档步骤进行mac环境部署: 申请苹果开发者账号 此处略 创建申请证书 这样做的目的就是为你的电脑安装发布许可证,只有这样你的电脑 ...