两种方法的思路

一、使用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. webrequest、httpwebrequest、webclient、HttpClient 四个类的区别

    一.在 framework 开发环境下: webrequest.httpwebreques  都是基于Windows Api 进行包装, webclient 是基于webrequest 进行包装:(经 ...

  2. Struts2学习第2天--Struts2的Servlet的API的访问 Struts2的结果页面的配置 Struts2的数据的封装(包括复杂类型)

    启动后访问jsp 输入姓名密码: 提交后跳转打action 打印: 修改类: 配置同上 结果同上. 实现这俩接口 就得到了 以上代码附上: struts.xml: <?xml version=& ...

  3. git配置本地环境(phpstudy/tortoisegit/git等)

    1.下载安装phpstudy 2.下载安装git 下载地址:https://git-scm.com/downloads 3.下载安装tortoisegit,电脑64位就下载这个,如图: 4.下载安装“ ...

  4. 【BZOJ3622】已经没什么好害怕的了 容斥原理+dp

    Description Input Output Sample Input 4 2 5 35 15 45 40 20 10 30 Sample Output 4 HINT 输入的2*n个数字保证全不相 ...

  5. 1.线性回归、Logistic回归、Softmax回归

    本次回归章节的思维导图版总结已经总结完毕,但自我感觉不甚理想.不知道是模型太简单还是由于自己本身的原因,总结出来的东西感觉很少,好像知识点都覆盖上了,但乍一看,好像又什么都没有.不管怎样,算是一次尝试 ...

  6. eclipse的一些快捷键记录

    查看所有快捷键:Ctrl + Shift + L Ctrl + Shift + F:格式化(关闭搜狗输入法的所有快捷键) Alt + /:智能提示,自动补全 Ctrl + / :添加单行注释(取消:C ...

  7. 前端模块开发的基础代码,兼容amd,cmd标准,也可以直接使用window来引用对象

    (function(global, factory) { if (typeof define === 'function' && define.amd) { define(functi ...

  8. C#实现WebSocket协议客户端和服务器websocket sharp组件实例解析

    看到这篇文章的题目,估计很多人都会问,这个组件是不是有些显的无聊了,说到web通信,很多人都会想到ASP.NET SignalR,或者Nodejs等等,实现web的网络实时通讯.有关于web实时通信的 ...

  9. 用 GitLab CI 进行持续集成

    简介 从 GitLab 8.0 开始,GitLab CI 就已经集成在 GitLab 中,我们只要在项目中添加一个 .gitlab-ci.yml 文件,然后添加一个 Runner,即可进行持续集成. ...

  10. BCH code

    简单介绍 若循环码的生成多项式具有如下形式\(g(x)=LCM[m_{1}(x),m_{3}(x)..m_{2t-1}(x)]\) 其中LCM表示最小公倍式,t为纠错个数,\(m_{i}(x)\)为素 ...