IE不支持HTML5表单属性placeholder的解决办法
1. [代码][JavaScript]代码
(function ($) {
$.fn.placeholder = function (options) {
var defaults = {
pColor: "#ccc",
pActive: "#999",
pFont: "14px",
activeBorder: "#080",
posL: 8,
zIndex: "99"
},
opts = $.extend(defaults, options);
//
return this.each(function () {
if ("placeholder" in document.createElement("input")) return;
$(this).parent().css("position", "relative");
var isIE = $.browser.msie,
version = $.browser.version;
//不支持placeholder的浏览器
var $this = $(this),
msg = $this.attr("placeholder"),
iH = $this.outerHeight(),
iW = $this.outerWidth(),
iX = $this.position().left,
iY = $this.position().top,
oInput = $("<label>", {
"class": "test",
"text": msg,
"css": {
"position": "absolute",
"left": iX + "px",
"top": iY + "px",
"width": iW - opts.posL + "px",
"padding-left": opts.posL + "px",
"height": iH + "px",
"line-height": iH + "px",
"color": opts.pColor,
"font-size": opts.pFont,
"z-index": opts.zIndex,
"cursor": "text"
}
}).insertBefore($this);
//初始状态就有内容
var value = $this.val();
if (value.length > 0) {
oInput.hide();
};
//
$this.on("focus", function () {
var value = $(this).val();
if (value.length > 0) {
oInput.hide();
}
oInput.css("color", opts.pActive);
//
if(isIE && version < 9){
var myEvent = "propertychange";
}else{http://www.huiyi8.com/hunsha/lifu/
var myEvent = "input";
}婚纱礼服欣赏
$(this).on(myEvent, function () {
var value = $(this).val();
if (value.length == 0) {
oInput.show();
} else {
oInput.hide();
}
});
}).on("blur", function () {
var value = $(this).val();
if (value.length == 0) {
oInput.css("color", opts.pColor).show();
}
});
//
oInput.on("click", function () {
$this.trigger("focus");
$(this).css("color", opts.pActive)
});
//
$this.filter(":focus").trigger("focus");
});
}
})(jQuery)
2. [代码]调用方法:
//解决IE下不支持placeholder
if($.browser.msie) {
$(":input[placeholder]").each(function(){
$(this).placeholder();
});
}
IE不支持HTML5表单属性placeholder的解决办法的更多相关文章
- 服务器变量 超级全局数组$_SERVER (附加超简单表单与html5表单属性)
001.html <html> <head><title>user log</title> <meta http-equiv="cont ...
- HTML5: HTML5 表单属性
ylbtech-HTML5: HTML5 表单属性 1.返回顶部 1. HTML5 表单属性 HTML5 新的表单属性 HTML5 的 <form> 和 <input>标签添加 ...
- 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能
当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.ap ...
- java表单重复提交常用解决办法
最近在看些基础的东西,顺便做下笔记.相信大家在平时网页使用中,经常会有按钮重复点击,然后点不动刷新,还有当网络延时比较厉害点了没反应在点击的重复提交.为了避免这种情况,总结了一下4点处理方案 表单重复 ...
- HTML5表单提示placeholder属性兼容IE
placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 <inpu ...
- HTML5 表单属性
form 属性 form 属性规定输入域所属的一个或多个表单. 注释:form 属性适用于所有 <input> 标签的类型. form 属性必须引用所属表单的 id: 实例 <for ...
- 微信自带浏览器不支持form表单post提交方案解决
微信自带浏览器form表单post提交,Java控制后台获取不到值得解决方案: 第一种:把post改成get请求,但是改后另一个问题来了就是,数据不安全了,连接上都能看到,导致数据会流失,Java ...
- 针对在webview模式中,小米魅族手机不支持html5原生video的control的解决办法![原创]
其实,解决办法就是,重新写个control控制功能,.同样用流行的video.js可以实现 第一步就是增加个播放的图片..要不然没有按钮多难看! <div class="videoDi ...
- Class 'Illuminate\Html\HtmlServiceProvider' not found或者form表单不能正常使用解决办法
在laravel框架中,form不能正常使用如何处理. 网上搜到的解决方案通常都是一致的,下面分类考虑: 1,打开根目录composer.json 文件, require 里面增加: 如果larave ...
随机推荐
- tomcat内存、连接数优化
1.检測系统能够设置的内存大小 java -Xmx1024M -version(当中1024表示检測内存能否够调整到这个数) 2.设置tomcat内存 在tomcat_home/bin/catalin ...
- SVN切分支步骤
1.右键project选择Brankch/Tag 2.选择SVN路径并在改路径下填写project名称 3.选择最新版本号 4.填写必要的凝视备忘,方便日后查看 5.刷新父文件夹文件夹.下载被切出来的 ...
- [C++设计模式] state 状态模式
<head first 设计模式>中的样例非常不错,想制造一个自己主动交易的糖果机,糖果机有四个状态:投入钱不足,投入钱足够,出售糖果,糖果售罄. 糖果机的当前状态处于当中不同的状态时,它 ...
- Android Activity间动画跳转
本博文主要介绍activity间动画跳转的问题,在这里讲一下怎么设置全部activity的动画跳转和退出跳转.事实上有些软件已经这样做了.比方我们都比較熟悉的大众点评网. 以下我们通过一个实例来看一下 ...
- adb 功能大全
当然首先是须要进入cmd命令行,执行 adb shell的. 以下介绍一些我们常常须要可是不怎么会用的命令 1. df -sh 查看当前目录占用空间大小 2. du 查看系统如今的内存使用情况 3. ...
- nginx配置1:借助Nginx搭建反向代理服务器与缓存静态文件
修改配置文件nginx.conf (1)进程数与每个进程的最大连接数: •nginx进程数,建议设置为等于CPU总核心数 •单个进程最大连接数,那么该服务器的最大连接数=连接数*进程数 (2)Ngin ...
- Android-DrawerLayout介绍
DrawerLayout已经出来非常久了,个人认为国内的app都深受ios的毒害在设计上都争先模仿ios的风格,都忘了什么是独特的Android风格.自己得先学的然后跟产品争取在项目中使用上一系列的A ...
- 获得手机的ip
本文转载至 http://blog.csdn.net/showhilllee/article/details/8746114 iosip手机 貌似ASI里获取ip地址的链接不可以了.也曾试过 ...
- Python 深入剖析SocketServer模块(一)(V2.7.11)
一.简介(翻译) 通用socket server 类 该模块尽力从各种不同的方面定义server: 对于socket-based servers: -- address family: ...
- 【BZOJ2427】[HAOI2010]软件安装 Tarjan+树形背包
[BZOJ2427][HAOI2010]软件安装 Description 现在我们的手头有N个软件,对于一个软件i,它要占用Wi的磁盘空间,它的价值为Vi.我们希望从中选择一些软件安装到一台磁盘容量为 ...