让 IE 支持HTML5 placeholder
HTML5 新增的placeholder属性已经得到现代浏览器的支持,旨在提供简单的API可以为文本输入框设置 描述输入字段预期值的提示信息(hint)。
这是W3C在标准化的过程中对用户体验的更多考虑。但是这一属性在IE却没有得到很好的支持,至少到IE9没有被支持,那么,我们在使用placeholder的时候可以为IE写一个扩展的JS脚本,让IE也支持placeholder。
我们只需在页面loaded后运行一个函数,就能让IE支持placeholder。
function setIEplaceHolder () {
if ("placeholder" in document.createElement("input")) {
return;
}
function placeHolder (elem) { var left = elem.offsetLeft, top = elem.offsetTop,
paddingLeft = parseInt(elem.currentStyle.paddingLeft),
paddingTop = parseInt(elem.currentStyle.paddingTop),
placeValue = elem.getAttribute("placeholder"),
span = document.createElement("span"); span.innerHTML = placeValue;
span.style.position = "absolute";
span.style.left = left + paddingLeft + 2 + "px";
span.style.top = top + paddingTop + 2 + "px";
span.style.color = "#999"; elem.parentNode.appendChild(span); span.onclick = function () {
elem.focus();
} elem.attachEvent('onpropertychange', function () {
if (elem.value.length > 0) {
span.style.visibility = "hidden";
} else {
span.style.visibility = "visible";
}
});
}
//input
var inputs = document.getElementsByTagName("input"),
len = inputs.length;
for (var i=0; i<len; i++) {
if (inputs[i].getAttribute("placeholder")) {
placeHolder(inputs[i]);
}
}
//textarea
var textareas = document.getElementsByTagName("textarea"),
len = textareas.length;
for (var i=0; i<len; i++) {
if (textareas[i].getAttribute("placeholder")) {
placeHolder(textareas[i]);
}
}
}
让 IE 支持HTML5 placeholder的更多相关文章
- IE8 不支持html5 placeholder的解决方案
IE8不支持html5 placeholder的解决方法. /** * jQuery EnPlaceholder plug * version 1.0 2014.07.01戈志刚 * by Frans ...
- html5 placeholder ie 不兼容问题 解决方案
解决HTML5 placeholder的方案 来源: 时间:2013-09-05 20:06:49 阅读数:11375 分享到: 0 [导读] 使低版本浏览器支持Placeholder有很多方 ...
- 支持HTML5 SqlLite的AndroidApp
简介: 想要建立一个支持HTML5的Android App; 这个HTML5的程序需要使用本地存储,特别是sqllite; 用eclipse创建了一个app,这个app默认在res/layout建了两 ...
- (转)html5 Placeholder属性兼容IE6、7方法
使低版本浏览器支持Placeholder有很多方法,都不是很完美,或多或少有点问题,且有些原生支持的浏览器在获得焦点时会清空Placeholder提示.发现zhihu的解决方法不错,特记录下 wind ...
- HTML5 Placeholder实现input背景文字提示效果
这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...
- HTML5 placeholder(空白提示) 属性
原文地址:HTML5′s placeholder Attribute 演示地址: placeholder演示 原文日期: 2010年08月09日 翻译日期: 2013年8月6日 浏览器引入了许多的HT ...
- 现在有哪些浏览器的哪些版本支持 HTML5
现在有哪些浏览器的哪些版本支持 HTML5 1.IE IE9支持部分 IE10+支持2.Firefox Firefox3.5,3.6支持大部分 Firefox4.0+支持3.Chrome Chrome ...
- [C#]如何让webbrowser控件支持Html5
最近因为项目的需要,需要研究在C#winform窗体中加载网页,和弹出提醒,但我们的网站是HTML5的,ie浏览器内核不支持,而且因为根据客户机系统的不一致,加载的ie内核可能是不同,显示的效果也会不 ...
- 让IE系列支持HTML5的html5shiv.js和respond.min.js
HTML5越来越成为主流,被广大搜索引擎所使用,但IE对HTML5的支持却常被人唾弃. 解决方案有两种: 1.为网站创建多套模板,通过程序对User-Agent的判断给不同的浏览器用户显示不同的页面, ...
随机推荐
- PHP图形计算器(计算三角形矩形周长面积)
运用PHP面向对象的知识设计一个图形计算器,同时也运用到了抽象类知识,这个计算器可以计算三角形的周长和面积以及矩形的周长和面积.本图形计算器有4个页面:1.PHP图形计算器主页index.php; ...
- zsh中home键失灵问题
putty访问linux时,如果出现这个情况,可以更改配置中Connection->Data->Terminal-type-string,改为linux,再连接即可 mac下可打开终端的配 ...
- Yii2——MYSQL操作
先创建连接对象 $connection = new \yii\db\Connection([ 'dsn' => $dsn, 'username' => $username, 'passwo ...
- python之路——爬虫实例
urlController.py import bsController from urllib import request class SpiderMain(object): def __init ...
- UE标签排列方式
UE是一款很顺手的文件编辑软件.打开文本,都会有个标签.根据个人喜好,我喜欢标签都展开,方便快速选取指定文本. 设置如下: 高级>配置>应用程序布局>可停靠窗口>类型 ...
- Android 手机上安装并运行 Ubuntu 12.04(转,没实测)
设备需要root权限,并且安装了BusyBox最小 1GHz 处理器(推荐)Android 系统版本 2.1 或以上Android 设备需要自定义的ROM固件SD卡至2.5GB (安装大映像的需要3. ...
- POJ2632 Crashing Robots(模拟)
题目链接. 分析: 虽说是简单的模拟,却调试了很长时间. 调试这么长时间总结来的经验: 1.坐标系要和题目建的一样,要不就会有各种麻烦. 2.在向前移动过程中碰到其他的机器人也不行,这个题目说啦:a ...
- COJ 0580 4021征兵方案
4021征兵方案 难度级别: C: 编程语言:不限:运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 现在需要征募女兵N人,男兵M人,每征募一个人 ...
- Java---常用基础面试知识点
综合网上的一点资源,给大家整理了一些Java常用的基础面试知识点,希望能帮助到刚开始学习或正在学习的学员. 1.抽象 抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方 ...
- 【2013长沙区域赛】部分题解 hdu4791—4801
1001: 签到题,二分一下即可 代码: #include <set> #include <map> #include <cmath> #include <c ...