placeholder兼容性问题
由于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兼容性问题的更多相关文章
- 解决input 中placeholder的那些神坑
**昨天后台小哥哥提到placehold无法显示问题,我这边总结一下,顺便写个小文章分享给大家..** ============================================== 一 ...
- 解决input标签placeholder属性浏览器兼容性问题的一种方法
为文本框input添加文字输入提示,H5为input提供了一个placeholder属性.在支持H5的浏览器中,用此属性设置输入提示,简单方便,但是对于IE8以下版本,都不支持placeholder属 ...
- placeholder右对齐的写法,兼容性比较高的一种方法
placeholder右对齐的写法,如果你不考虑移动端的话,完全可以使用text-align:right,不过如果考虑移动端的话,在有一些手机上,即使你写了text-align:right,place ...
- 对于placeholder浏览器兼容性(包括密码输入框)解决办法
将以下脚本和样式引入你的页面(对于密码输入框,要设置ID属性值): <script type="text/javascript"> $(function () { // ...
- input placeholder属性IE、360浏览器兼容性问题
效果:http://hovertree.com/texiao/jquery/43/ 效果二:http://hovertree.com/texiao/jquery/43/1/ 请在IE中体验. 1.创建 ...
- placeholder的兼容性探索之路
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- placeholder在IE8中兼容性问题解决
placeholder是HTML5中的一个属性,可以在文本框中设置placeholder属性来显示一些提示性的文字,但对IE10以下的浏览器不支持,下面方法可以让placeholder能够使用在IE1 ...
- 解决HTML5中placeholder属性兼容性的JQuery插件
//调用方法 $(function () { $(".pHolder").jason(); }); //HTML代码 <input type="text&quo ...
- IE8 placeholder不支持的兼容性处理
引入 <script type="text/javascript" src="<%=path%>/common/js/jquery/jquery.min ...
随机推荐
- 关于react16.4——高阶组件(HOC)
高阶组件是react中用于重用组件逻辑的高级技术.可以说是一种模式.具体来说呢,高阶组件是一个函数,它接收一个组件并返回一个新的组件. 就像这样, const EnhancedComponent = ...
- 牛客练习赛30-A/C
链接:https://ac.nowcoder.com/acm/contest/216/A来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536K ...
- ECharts 报表事件联动系列二:柱状图,饼状图添加事件
代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- Django之DjangoAdmin
前言: 当我们启动1个Django程序的时候,在程序的settings.py配置文件默认注册了1个名为'django.contrib.admin'的APP程序,并且配置了默认路由映射关系url(r'^ ...
- 解决VS Code保存时候自动格式化
VS code 保存会自动格式化.以前都是alt+shift+F格式化的,现在一保存就格式化 解决方式:找到你的VScode扩展,把JS-CS-HTML Formatter这个插件禁用就可以解决
- 百度AI认为最漂亮的中国女星是----范冰冰
一.程序说明 1.1 程序说明 之前写调用百度AI接口的程序,然后刷到了两条明星的新闻,就想到了写个给明星颜值排下名的程序. 程序的关键点是两个,第一个是百度AI接口的调用这点其实直接使用早前实现的类 ...
- easyui中如何为validatebox添加事件(onblur、onclick等)
在我们一般html的input标签,textbox事件可以直接使用onblur().onclick()事件,但是在easyui的validatebox没有onblur事件, 如果我们需要为valida ...
- Win10系列:UWP界面布局基础7
2.附加属性 有一些XAML元素,其自身的属性大多是在其它的元素中声明和使用的,该元素本身却很少使用,这些在其他元素中声明和使用的属性被称为附加属性(Attached Properties).附加属性 ...
- 【oracle常见错误】ora-00119和ora-00132问题的解决方法
oracle11g安装后,本地无法登录!前提:服务全部打开,监听也配置好了! win7 64位 oracle 11g 简单的sql命令: 先登录到sqlplus:sqlplus/nolog; 登录数据 ...
- 【2】IOS APP打包发布
目的: 本文的目的是对IOS APP打包发布做了对应的介绍,大家可根据文档步骤进行mac环境部署: 申请苹果开发者账号 此处略 创建申请证书 这样做的目的就是为你的电脑安装发布许可证,只有这样你的电脑 ...