【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 ...
随机推荐
- dede留言板链接变成localhost的解决办法
去前缀arctype表中找到在线留言栏 把根目录换成{cmspath}/ 例如{cmspath}/plus/guestbook.php 或者在后台的栏目管理里改---但是预览不能使用了
- javascript保留两位小数
原文地址http://blog.csdn.net/he20101020/article/details/8503308 <script type="text/javascrip ...
- 关于malloc申请的动态内存的问题
http://bbs.bccn.net/thread-331344-1-1.html #include<stdio.h>#include<stdlib.h>int main(v ...
- SQL Server 2005 分区表创建实例
--创建一个分区函数(默认为左边界)CREATE PARTITION FUNCTION PARTFUNC1(INT)AS RANGEFOR VALUES(1000,2000,3000,4000,500 ...
- azure 云上MySQL最新版本 MySQL5.7.11 批量自动化一键式安装 (转)
--背景云端 以前都喜欢了源码安装mysql,总觉得源码是高大上的事情,不过源码也需要时间,特别是make的时候,如果磁盘和cpu差的话,时间很长很长,在虚拟机上安装mysql尤其甚慢了. 现在业务发 ...
- hadoop(四): 本地 hbase 集群配置 Azure Blob Storage
基于 HDP2.4安装(五):集群及组件安装 创建的hadoop集群,修改默认配置,将hbase 存储配置为 Azure Blob Storage 目录: 简述 配置 验证 FAQ 简述: hadoo ...
- 注解:@Autowired
Spring的bean对象自动装配注解,@Autowired有三种使用方式,下面分别介绍! 1. 作用于类成员变量上,即在定义类的成员变量的时候,至于其上方. public class Mobile{ ...
- linux crontab 实现每秒执行(转)
linux crontab 命令,最小的执行时间是一分钟.如需要在小于一分钟内重复执行,可以有两个方法实现. 1.使用延时来实现每N秒执行 创建一个php做执行动作,非常简单,就是把当前时间写入log ...
- 试用fastJSON
实体类 User.java package com.test.fastjson.entity; import java.util.Date; public class User { private L ...
- nova分析(7)—— nova-scheduler
Nova-Scheduler主要完成虚拟机实例的调度分配任务,创建虚拟机时,虚拟机该调度到哪台物理机上,迁移时若没有指定主机,也需要经过scheduler.资源调度是云平台中的一个很关键问题,如何做到 ...