placeholder在ie789下无效
<input type="text" class="input" placeholder="用户名/手机号码/邮箱" value=""/>
<script>
var inputs=$("input[class $='input']");
for(var i=0;i<inputs.length;i++)
{
if(inputs[i].value==""||inputs[i].value==null)
{
placeHolder(inputs[i],true);
}
}
/**
* @name placeHolder
* @class 跨浏览器placeHolder,对于不支持原生placeHolder的浏览器,通过value或插入span元素两种方案模拟
* @param {Object} obj 要应用placeHolder的表单元素对象
* @param {Boolean} span 是否采用悬浮的span元素方式来模拟placeHolder,默认值false,默认使用value方式模拟
*/
function placeHolder(obj, span) {
if (!obj.getAttribute('placeholder')) return;
var imitateMode = span === true ? true: false;
var supportPlaceholder = 'placeholder' in document.createElement('input');
if (!supportPlaceholder) {
var defaultValue = obj.getAttribute('placeholder');
if (!imitateMode) {
obj.onfocus = function() { (obj.value == defaultValue) && (obj.value = '');
obj.style.color = '';
}
obj.onblur = function() {
if (obj.value == defaultValue) {
obj.style.color = '';
} else if (obj.value == '') {
obj.value = defaultValue;
obj.style.color = '#ACA899';
}
}
obj.onblur();
} else {
var placeHolderCont = document.createTextNode(defaultValue);
var oWrapper = document.createElement('span');
oWrapper.style.cssText = 'position:absolute; color:#ACA899; display:inline-block; overflow:hidden;';
oWrapper.className = 'wrap-placeholder';
oWrapper.style.fontFamily = getStyle(obj, 'fontFamily');
oWrapper.style.fontSize = getStyle(obj, 'fontSize');
oWrapper.style.marginLeft = parseInt(getStyle(obj, 'marginLeft')) ? parseInt(getStyle(obj, 'marginLeft')) + 3 + 'px': 3 + 'px';
oWrapper.style.marginTop = parseInt(getStyle(obj, 'marginTop')) ? getStyle(obj, 'marginTop') : 1 + 'px';
oWrapper.style.paddingLeft = getStyle(obj, 'paddingLeft');
oWrapper.style.width = obj.offsetWidth - parseInt(getStyle(obj, 'marginLeft')) + 'px';
oWrapper.style.height = obj.offsetHeight + 'px';
oWrapper.style.lineHeight = obj.nodeName.toLowerCase() == 'textarea' ? '': obj.offsetHeight + 'px';
oWrapper.appendChild(placeHolderCont);
obj.parentNode.insertBefore(oWrapper, obj);
oWrapper.onclick = function() {
obj.focus();
}
//绑定input或onpropertychange事件
if (typeof(obj.oninput) == 'object') {
obj.addEventListener("input", changeHandler, false);
} else {
obj.onpropertychange = changeHandler;
}
function changeHandler() {
oWrapper.style.display = obj.value != '' ? 'none': 'inline-block';
}
/**
* @name getStyle
* @class 获取样式
* @param {Object} obj 要获取样式的对象
* @param {String} styleName 要获取的样式名
*/
function getStyle(obj, styleName) {
var oStyle = null;
if (obj.currentStyle) oStyle = obj.currentStyle[styleName];
else if (window.getComputedStyle) oStyle = window.getComputedStyle(obj, null)[styleName];
return oStyle;
}
}
}
}
</script>
placeholder在ie789下无效的更多相关文章
- zendstudio快捷键复制行Ctrl+Alt+向下无效的解决方法
今天不断地在百度输入类似"zendstudio快捷键复制行Ctrl+Alt+向下无效"这样的关键字,里面搜索到的内容都是在说系统的显卡驱动Ctrl+Alt+方向键和ZendStud ...
- 奇怪的问题,InvalidateRect最后一个参数在XP下无效
一直用的WIN2K系统,写的一个程序在本机正常,到XP系统的机器运行发现调整窗口大小时界面闪得厉害,程序比较大,而且这种闪烁还不好调试,因为单步调试没有闪烁效果,只能排除法找原因,最后以为找到原因了, ...
- click 在网页测试手机模式下无效,不能执行。调成非手机模式即可
click 在网页测试手机模式下无效,不能执行. 调成非手机模式即可
- placeholder在IE下的兼容问题
最近写项目要求兼容到ie8,写完了去ie测试的时候,发现了placeholder在ie下的兼容问题,为了解决,搜罗网上各种牛人的解决方案,自己总结如下: css样式(设置各浏览器下placeholde ...
- HTML5的placeHolder在IE9下workaround引发的Bug(按下葫芦起了瓢)
详见StackOverFlow的:Simple jQuery form Validation: Checking for empty .val() failing in ie9 due to plac ...
- jq focus 在火狐(Firefox)下无效
今天写代码的时候发现,在blur事件里面写focus获取焦点无效, $input.blur(function(){ ……………… $input.focus(): } 而且只是在火狐下面无效而已,很明显 ...
- ajax用get刷新页面元素在IE下无效解决~~
总结一下解决办法: 在IE下用Ajax请求某一页面,通常会因为缓存的原因而返回上一次的结果,造成混乱,[即get方式时,获取数据,因发送参数和地址都一致,故IE浏览器会从缓存中取,而不会去请求服务器端 ...
- 关于inline-block在IE8下无效的解决方法
<style> .divClass{ width:500px; border:1px solid #ccc; } /*IE8下可以不用加(*zoom:1;*display:inline;需 ...
- input的placeholder在ie9下不兼容的结局办法。
/* IE9placeholder支持 */ if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder ...
随机推荐
- 在SQL Server中 获取日期、日期格式转换
--常用日期转换参数: PRINT CONVERT(varchar, getdate(), 120 ) 2016-07-20 16:09:01 PRINT replace(replace(replac ...
- .net 浏览器请求过程(图)
大致: 细节: (信息来源于传智播客教学视频)
- Python基础学习笔记(十二)文件I/O
参考资料: 1. <Python基础教程> 2. http://www.runoob.com/python/python-files-io.html ▶ 键盘输入 注意raw_input函 ...
- apiCloud授权绑定第三方账号,微信、QQ、微博。
1.检测软件是否安装 2.授权获取code 3.获取token,openid等 4.获取头像昵称 var wx,qq,weibo; var loginParam={}; apiready = func ...
- 代码中特殊的注释技术——TODO、FIXME和XXX的用处
本文内容概要: 代码中特殊的注释技术--TODO.FIXME和XXX的用处. 前言:今天在阅读Qt Creator的源代码时,发现一些注释中有FIXME英文单词,用英文词典居然查不到其意义!实际上, ...
- Maven项目的发布,发布到Nexus
原文:http://blog.csdn.net/mexican_jacky/article/details/50277505 第一步: 配置信息如下: <!-- 发布项目的配置 --> ...
- HTML的超链接
一.超链接概念: 超链接也叫 URL 中文翻译为资源定址器.这个定址器的功能主要告诉浏览器根据 URL的地址找到所需的资源.作用于连接资源 二.超链接的常用属性: 1.href=指定目的地,当有了hr ...
- Ubuntu 查看文件以及磁盘空间大小管理
(1)查看文件大小 查看当前文件夹下所有文件大小(包括子文件夹) du -sh # du -h15M ./package16K ./.fontconfig4.0K . ...
- Css3_必备10个东西
1.边框圆角(Border Radiuas) 这个是我们在平常很常用的吧,以前我在用div圆角的时候,特别特别的痛苦,不管是用CSS来画圆角,还是用图片来画圆角都不那么容易,但是现在好了,在CSS3中 ...
- 那些年独自踩过的flascc的坑
[一个工程中使用多个flascc编译出来的swc] 1.如果是swf工程, 工程中同时使用多个flascc编译出来的swc, 可以顺利通过. 2.如果是swc工程, 工程中同时使用多个flascc编译 ...