两种方法的思路

一、使用input的value作为显示文本

二、不使用value,添加一个额外的span标签,绝对定位覆盖到input上面。

两种方式各有优缺点,方法一占用了input的value属性,表单提交时需要一些额外的判断工作,方法二则使用了多余的标签。

placeholder=function(input){
var text=input.getAttribute('placeholder_t'),
defaultValue=input.defaultValue;
if(defaultValue==''){
input.value=text;
input.style.color='#c0c0c0';
}
input.onfocus=function(){
if(input.value===text)
{
this.value='';
input.style.color='#000000';
}
};
input.onblur=function(){
if(input.value===''){
this.value=text;
input.style.color='#c0c0c0';
}
}
} placeholder(document.getElementById("slbh"));
placeholder(document.getElementById("cxmm"));

IE678910不兼容H5的placeholder属性,需要JS解决的更多相关文章

  1. [干货]兼容HTML5的Placeholder属性-更新版v0.10102013

    HTML5对Web Form做了许多增强,比如input新增的type类型.Form Validation等.Placeholder是HTML5新增的另一个属性,当input或者textarea设置了 ...

  2. ie8不兼容input的placeholder属性但是要实现其效果的方法

    通过学习前辈的思想,个人想法整理如下: 通过两个元素标签,仿造出placeholder的内容 使用position定位好两个元素标签 第一要隐藏两个元素标签display:none,在<!--[ ...

  3. 修复IE9.0下PlaceHolder 属性问题js脚本

    在开发前端系统时候碰到这种兼容问题,以下是个人解决方案,希望能给其他人带来帮助: var JPlaceHolder = { //检测 _check: function () { return 'pla ...

  4. 兼容ie10以下版本的placeholder属性

    <script src="${ctx }/js/jquery.placeholder.js" type="text/javascript">< ...

  5. placeholder属性兼容ie8

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. IE如何兼容placeholder属性

    在前端开发中,经常需要为input设置placeholder属性,但是placeholder是HTML5新属性,在IE10以下不兼容,那么如何完美兼容呢? 网上搜索了一下,其实也挺简单的,可以采用以下 ...

  7. input 的 placeholder属性在IE8下的兼容处理

    placeholder是input标签的新属性,在使用的时候有两个问题: 1.IE8 下不兼容 处理思路: 如果浏览器不识别placeholder属性,给input添加类名placeholder,模仿 ...

  8. 改进《完美让IE兼容input placeholder属性的jquery实现》的不完美

    <完美让IE兼容input placeholder属性的jquery实现>中的代码在IE9以下浏览器中会出错,原因是因为ie9以下的浏览器对input的标签的解释不同. 例如对以下文本框的 ...

  9. HTML5表单提示placeholder属性兼容IE

    placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 <inpu ...

随机推荐

  1. [.net 多线程]ThreadPool

    CancellationTokenSource tocken = new CancellationTokenSource(); ThreadPool.QueueUserWorkItem(param = ...

  2. spring mvc 框架启动报错:nested exception is java.lang.NoClassDefFoundError: org/w3c/dom/ElementTraversal 解决办法

    今天准备将以前自己搭建的一个框架拿出来用一下,结果发现启动报错:nested exception is java.lang.NoClassDefFoundError: org/w3c/dom/Elem ...

  3. linux虚拟机安装mysql(Mysql-5.7.10)

    注:MySQL5.5版本开始弃用了常规的configure编译方法,通过cmake来编译.需要下载安装cmake编译器.boost库.ncurses库.GNU分析器生成器bison 1. 安装基础环境 ...

  4. git Problem with the SSL CA cert (path? access rights?)

    问题: [root@localhost opt]# git clone https://github.com/docker/docker.git 正克隆到 'docker'...fatal: unab ...

  5. Bitnami WordPress无法修改MySQL root的默认密码的解决方法?

    今天准备修改Bitnami WordPress的MySQL root的默认密码,但是总是出现下面错误: ERROR 1045 (28000): Access denied for user 'root ...

  6. Timer(定时器)

    默认情况下,在每个采样器之前没有任何延时,这样不能很好的模拟现实生活中人们访问网页,因为现实生活中人们点击一个请求后,会有一定的时间,然后再点击下一个请求,JMeter提供了定时器来模拟这种行为. 定 ...

  7. Intellij IDEA神器那些让人爱不释手的小技巧

      完整的IDEA使用教程,GitHub地址: https://github.com/judasn/IntelliJ-IDEA-Tutorial 概述 之前写了一篇介绍IntellIJ IDEA的文章 ...

  8. 【转】C# datagridview大小跟随窗口动态改变

    源地址:https://blog.csdn.net/fengxing11/article/details/52527715

  9. Kubernetes权威指南学习笔记(一)

    https://blog.csdn.net/keysilence1/article/details/70239717 概念 Kubernetes是谷歌严格保密十几年的秘密武器——Borg的一个开源版本 ...

  10. 大型php网站性能和并发访问优化方案(转载自php中文网)

               网站性能优化对于大型网站来说非常重要,一个网站的访问打开速度影响着用户体验度,网站访问速度慢会造成高跳出率,小网站很好解决,那对于大型网站由于栏目多,图片和图像都比较庞大,那该怎 ...