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 ...
随机推荐
- 一、Redis数据备份与恢复
Redis里的数据都是保存在内存中,关闭服务器必须进行数据备份. 1.Redis的数据持久化 bgsave做镜像全量持久化,AOF做增量持久化. bgsave的原理:fork和cow(copy on ...
- shell历史简介
shell也叫做终端.命令行. shell的基本作用是供用户输入命令.解析用户所输入命令.呈现命令执行结果. shell有多种不同的shell其语法会有差异,这也是严谨的sh文件会在首行以“#!/bi ...
- Linux软件源书写格式解析及本地yum源制作
1.Debian类系统 配置文件:/etc/apt/sources.list 例子:deb https://mirrors.aliyun.com/kali kali-rolling main cont ...
- System.gc()和-XX:+DisableExplicitGC启动参数,以及DirectByteBuffer的内存释放
首先我们修改下JVM的启动参数,重新运行之前博客中的代码.JVM启动参数和测试代码如下: -verbose:gc -XX:+PrintGCDetails -XX:+DisableExplicitGC ...
- SpringBoot主程序类,主入口类
主程序类,主入口类 /** * @SpringBootApplication 来标注一个主程序类,说明这是一个Spring Boot应用 */ @SpringBootApplication publi ...
- Easyui的datagrid的行编辑器Editor中添加事件(修改某个单元格带出其他单元格的值)
项目中有个datagrid需要编辑行时,用到Editor的属性,那么如何添加一个事件 问题:同一个编辑行中的某个单元格值改变时,修改其他单元格的值 页面用到的datagrid <table id ...
- sql server中截取字符串的常用函数
我们如果要在sql server中,使用截取字符串的方法要怎样使用呢? sql server提供了3个常用截取字符串方法,LEFT().RIGHT().SUBSTRING() /****** Sql ...
- [x] 封装、继承,多态
那么多态的作用是什么呢,封装可以使得代码模块化,继承可以扩展已存在的代码,他们的目的都是为了代码重用. 而多态的目的则是为了接口重用.也就是说,不论传递过来的究竟是那个类的对象,函数都能够通过同一个接 ...
- Daily record-June
June201. Dear, wake up! Seven o'clock now, it's time to get up. Wash your face and to have breakfast ...
- 图片加载------reactVirtualized
作用: 让HTML文档始终保持固定数量的图片数量,可以节省带宽