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 ...
随机推荐
- Leetcode 128 *
class Solution { public: int longestConsecutive(vector<int>& nums) { ; unordered_map<in ...
- tomcat压缩版配置
下载Jdk并安装 配置Java环境变量 因为需要用services.bat安装,services.bat中 rem Make sure prerequisite environment variabl ...
- MongoDB的管理
1. 启动和停止MongoDB: 2. 访问控制: 3. 命令行操作: 4. 进程控制: 5. MongoDB的监控: 6. MongoDB数据的导入.导出: 7. MongoDB备份.还原. Mon ...
- Flexbox 布局的最简单表单 (转)
作者: 阮一峰 弹性布局(Flexbox)逐渐流行,越来越多人使用,因为它写 CSS 布局真是太方便了. 三年前,我写过 Flexbox 的介绍(上,下),但是有些地方写得不清楚.今天,我看到一篇教程 ...
- 【Loadrunner基础知识】web_get_int_proterty
1.函数作用:记录http请求的响应信息 2.函数参数: HTTP_INFO_RETURN_CODE : http请求返回的状态码: HTTP_INFO_DOWNLOAD_SIZE : 返回页面下载的 ...
- linux 定时任务 日志记录
1 不记录日志 > /dev/null 2>&1 2 日志记录追加到指定文件 >> /path/mylog.log 2>&1
- API服务网关(Zuul)
技术背景 前面我们通过Ribbon或Feign实现了微服务之间的调用和负载均衡,那我们的各种微服务又要如何提供给外部应用调用呢. 当然,因为是REST API接口,外部客户端直接调用各个微服务是没有问 ...
- 一个非常适合IT团队的在线API文档、技术文档工具 (ShowDoc)
在逸橙呆了不到两年,开发时后端都有开发接口API,来到数库,好多后端开发和前端沟通是还是发doc文档,很不方便,我向cto反应,自己找到这个,老乡田雷(php,隔壁村的)也用过,可能某些原因选择其他的 ...
- 银联支付 Asp.Net 对接开发内容简介
银联对接开发主要包含测试环境以及生产环境两部分. 其中程序开发部分测试以及生产是相同的. 不同的是,测试环境与生产环境请求支付的Url地址,以及分别使用的证书不同. 一.配置部分 1,测试环境证书获取 ...
- ssh三大框架整合
spring+struts2+hibernate 参考1:数据库为oracle http://takeme.iteye.com/blog/1678268 参考2:数据库为mysql http://bl ...