【JavaScript】允许IE8使用placeholder
var placeholder = function ($element) { var $ = window.jQuery;
var version = parseFloat($.browser.version);
var isIE8 = $.browser.msie && version < 9; var text = $element.attr("cm-placeholder") || $element.attr("placeholder"); if (isIE8) { var $placeholderContainer = $element.closest("div");
$placeholderContainer.css({"position": "relative"}); window.setTimeout(function () { var getFakePlaceHolder = function () {
var cmPlaceholderId = $element.attr("cm-placeholder-id");
var $fakePlaceholder;
if (cmPlaceholderId && cmPlaceholderId.length > 0) {
$fakePlaceholder = $placeholderContainer.find("#" + cmPlaceholderId);
if ($fakePlaceholder && $fakePlaceholder.length > 0) {
return $fakePlaceholder;
}
} var cm_placeholder_id = uniqueId("cm-placeholder-");
var fakePlaceholder = '<span id="' + cm_placeholder_id + '" class="cm-placeholder">' + text + '</span>';
$fakePlaceholder = $(fakePlaceholder);
$placeholderContainer.append($fakePlaceholder); $fakePlaceholder.on("click", function (e) {
e.stopPropagation();
$element.focus();
}); $element.on('focus', function () {
$fakePlaceholder.hide();
}).on('blur', function () {
showFakePlaceholderIfNoText();
});
$element.attr("cm-placeholder-id", cm_placeholder_id); return $fakePlaceholder;
}; var $fakePlaceholder = getFakePlaceHolder(); var showFakePlaceholderIfNoText = function () {
if ($element.val() === '') { var ep = $element.position(); var top = ep.top+2; //- wp.top;
var left = ep.left + 10; //- wp.left;
var height = $element.height() - 2; $fakePlaceholder.css({
'top': top + 'px',
'left': left + 'px',
"height": height + "px",
"line-height": height + "px",
"display":"block",
"position":"absolute",
"color":"#999",
"font-size":"12px"
});
$fakePlaceholder.show(); } else {
$fakePlaceholder.hide();
}
}; showFakePlaceholderIfNoText(); }, 0); } else {
$element.attr("placeholder", text || "");
} };
【JavaScript】允许IE8使用placeholder的更多相关文章
- 让ie8支持 placeholder 属性
一. ie8支持 placeholder 属性 /* * ie8支持 placeholder 属性 */ $(function(){ if( !('placeholder' in document. ...
- IE8兼容placeholder的方案
用JavaScript解决Placeholder的IE8兼容问题 placeholder属性是HTML5新添加的属性,当input或者textarea设置了该属性后,该值的内容将作为灰色提示显示在文本 ...
- 【Javascript】IE8兼容 背景图片与a标签的onclick事件
先说几句牢骚话. 虽然IE8比之IE6.7有很大的进步,但是在执行效率.兼容性上仍然有很多问题.被广大开发者喜爱的平台才是好平台. 可惜多亏当年盗版XP打开中国的计算机市场,IE作为一款捆绑软件仍然在 ...
- 解决ie8下面placeholder显示问题
今天测试反馈一个bug,需要在ie8下面看到placeholder提示,开始的想法是对ie8进行降级处理,在ie8下面就不显示了. 现在测试反馈了,解决办法. function isLowIE() { ...
- 让IE8支持placeholder
$(function(){ if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder $('[placeholder]').focus(function( ...
- javascript 在ie8中报“缺少标识符、字符串或数字“问题再现:
开发和测试使用Chrome浏览器比较多,客户反馈某个页面打不开,自己用Chrome打开一切正常,用ie8打开,果然页面展现卡在那儿了,并且报了"缺少标识符.字符串或数字".查看是在 ...
- 原创-兼容IE8的placeholder
!function (o) { o.fn.extend({ PlaceHolder: function () { var _isEmpty = function (val) { return (val ...
- ie8中使用placeholder
placeholder 是 html5 中的新属性,考虑到还有不少 ie8 的用户,所以找了一个 ie8 的 placeholder 的补丁,如下: <script type="tex ...
- 使ie8正常支持placeholder
在IE8下测试,发现一个问题placeholder不被支持,下面是解决IE支持placeholder的方法,本文引用的jquery是1.12.0测试通过,先引用jquery <script ty ...
随机推荐
- STM32学习笔记:系统时钟和SysTick定时器
原文:http://blog.sina.com.cn/s/blog_49cb42490100s60d.html 1. STM32的时钟系统 在STM32中,一共有5个时钟源,分别是HSI.HS ...
- Js文本溢出自动添加省略号ellipsis
原文: ellipsis: function(value, len, word) { //判断value有没有超过指定长度 if (value && v ...
- 基于OkHttp的封装库TigerOkHttp的使用
在前面熟悉了OkHttp的用法之后,为了简化用法同时适用于我的项目,我针对OkHttp进行了更进一步的封装(源码及其Demo地址在https://github.com/huyongli/TigerOk ...
- 使用iostat分析IO性能
对于I/O-bond类型的进程,我们经常用iostat工具查看进程IO请求下发的数量.系统处理IO请求的耗时,进而分析进程与操作系统的交互过程中IO方面是否存在瓶颈. 下面通过iostat命令使用实例 ...
- 部署 mozilla-BrowserQuest
1,到GitHub下载代码 https://github.com/mozilla/BrowserQuest 2,安装Node.Js 下载地址 http://nodejs.org/ 直接下载安装版就可 ...
- html之p标签
p标签定义段落 p元素会自动在其前后创建一些空白,浏览器会自动添加这些空间. 效果图:
- oracle中where 子句和having子句中的区别
1.where 不能放在GROUP BY 后面 2.HAVING 是跟GROUP BY 连在一起用的,放在GROUP BY 后面,此时的作用相当于WHERE 3.WHERE 后面的条件中不能有聚集函数 ...
- sqlserver快照,启用基于行版本控制的隔离级别
在sqlserver标准的已提交读(read committed)隔离级别下,读写操作相互阻塞.未提交读(read uncommitted)虽然不会有这种阻塞,但是读操作可能会读到脏数据,这是大部分用 ...
- javascript 变量的作用范围
来自: http://hanxin0311.iteye.com/blog/181127 1.根据作用范围不同,变量有全局变量和局部变量两种.在函数里定义的变量为局部变量,局部变量只在函数内有效. 如果 ...
- CentOS下的网络配置文件说明
CentOS网络配置主要涉及到以下四个文件: 1./etc/sysconfig/network 在CentOS官方网站上给出了如下说明: The/etc/sysconfig/networkfile i ...