<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下无效的更多相关文章

  1. zendstudio快捷键复制行Ctrl+Alt+向下无效的解决方法

    今天不断地在百度输入类似"zendstudio快捷键复制行Ctrl+Alt+向下无效"这样的关键字,里面搜索到的内容都是在说系统的显卡驱动Ctrl+Alt+方向键和ZendStud ...

  2. 奇怪的问题,InvalidateRect最后一个参数在XP下无效

    一直用的WIN2K系统,写的一个程序在本机正常,到XP系统的机器运行发现调整窗口大小时界面闪得厉害,程序比较大,而且这种闪烁还不好调试,因为单步调试没有闪烁效果,只能排除法找原因,最后以为找到原因了, ...

  3. click 在网页测试手机模式下无效,不能执行。调成非手机模式即可

    click  在网页测试手机模式下无效,不能执行. 调成非手机模式即可

  4. placeholder在IE下的兼容问题

    最近写项目要求兼容到ie8,写完了去ie测试的时候,发现了placeholder在ie下的兼容问题,为了解决,搜罗网上各种牛人的解决方案,自己总结如下: css样式(设置各浏览器下placeholde ...

  5. HTML5的placeHolder在IE9下workaround引发的Bug(按下葫芦起了瓢)

    详见StackOverFlow的:Simple jQuery form Validation: Checking for empty .val() failing in ie9 due to plac ...

  6. jq focus 在火狐(Firefox)下无效

    今天写代码的时候发现,在blur事件里面写focus获取焦点无效, $input.blur(function(){ ……………… $input.focus(): } 而且只是在火狐下面无效而已,很明显 ...

  7. ajax用get刷新页面元素在IE下无效解决~~

    总结一下解决办法: 在IE下用Ajax请求某一页面,通常会因为缓存的原因而返回上一次的结果,造成混乱,[即get方式时,获取数据,因发送参数和地址都一致,故IE浏览器会从缓存中取,而不会去请求服务器端 ...

  8. 关于inline-block在IE8下无效的解决方法

    <style> .divClass{ width:500px; border:1px solid #ccc; } /*IE8下可以不用加(*zoom:1;*display:inline;需 ...

  9. input的placeholder在ie9下不兼容的结局办法。

      /*      IE9placeholder支持      */     if(!placeholderSupport()){   // 判断浏览器是否支持 placeholder         ...

随机推荐

  1. Sbt的使用初步和用sbt插件生成eclipse工程

    以前一直是用maven去管理java项目,现在开始写scala项目了但是在scala-ide中去编译scala项目和sbt的区别一直没弄清楚受到文章:http://my.oschina.net/yjw ...

  2. iOS问题处理:如何在Mac下显示Finder中的所有文件

    摘自:http://www.cnblogs.com/elfsundae/archive/2010/11/30/1892544.html 在Unix下工作,你可能需要处理一些“特殊“文件或文件夹,例如/ ...

  3. web服务器安装配置

    学习目标 javaweb概念和web资源分类 服务器的分类和常用服务器apache说明 tomcat 服务器目录结构介绍和工程发布 虚拟主机说明和配置 1.Web的概念 1.1.JavaWeb的概念 ...

  4. 2dx中文乱码问题

    我们的代码里面有一个bug 为了跟之前兼容的策划导表工具兼容 导表工具导出的excel全部都是ansi的 为了兼容就只能手动改成utf 8 无bom格式 后来策划嫌烦了 就让在程序段处理这个 研究了好 ...

  5. Linux下C程序的编译,运行,及调试

    先查看linux有没有gcc 和 gdb $ gcc -v $ gdb -v 如果没有安装gcc,可以 $ yum install gcc 要获取管理员权限才能安装软件,$ su root (有的li ...

  6. iOS - Block 代码块

    1.Block Block 是一段预先准备好的代码,可以在需要的时候执行,可以当作参数传递.Block 可以作为函数参数或者函数的返回值,而其本身又可以带输入参数或返回值.Block 是 C 语言的, ...

  7. web设计经验<六>令网站看起来不专业的10个设计误区

    不管你是不是一个羽翼未丰企业的领导,专业的网站能为你带来的东西比你想象的多很多.退一万步来说,“考虑到我们是一个小厂”,粗糙的网站也许能被用户理解,但是不一定能接受.每天大家所浏览的大量的网站,已经从 ...

  8. 自学EF一些小笔记

    一直在用DHhelper做MVC,感觉好山寨,也不怎么好用.决定开始学EF. 废话不多说开始记笔记..... EF就是把数据库表,存储过程,视图实例化,通过继承DbContext的一个类来操作数据实例 ...

  9. poj1673EXOCENTER OF A TRIANGLE

    链接 据说这题是垂心..数学太弱没有看出来,写了分朴实无华的代码.. 旋转三边得到图中的外顶点,然后连接三角形顶点求交点,交上WA..觉得没什么错误就去看了下discuss,发现都在说精度问题,果断开 ...

  10. 关于javascript的误区

    JavaScript 误区 接触JavaScript两年多遇到过各种错误,其中有一些让人防不胜防,原来对JavaScript的误会如此之深,仅以此文总结一下常见的各种想当然的误区 String rep ...