两种方法的思路

一、使用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. sqlserver中 多条数据合并成一条数据 (stuff 与 for xml path 连用)

    SQL 列转行,即多行合并成一条   需求:按照分组,将多条记录内容合并成一条,效果如下: 数据库示例: CREATE TABLE [t2]([NID] [bigint] NULL,[district ...

  2. owinAuthorize

    Nuget包获取 Install-Package Microsoft.AspNet.WebApi.Owin -Version 5.1.2 Install-Package Microsoft.Owin. ...

  3. Mysql初识数据库《五》初识sql语句

    初识sql语句 有了mysql这个数据库软件,就可以将程序员从对数据的管理中解脱出来,专注于对程序逻辑的编写 mysql服务端软件即mysqld帮我们管理好文件夹以及文件,前提是作为使用者的我们,需要 ...

  4. python3好用的requests库

    python3好用的requests库 requests是什么? requests是基于urllib编写的http库,支持python3,比urllib更好用,更简单.之前使用python写一些htt ...

  5. Jmeter_录制HTTPS

    [环境] Jmeter版本:Jmeter3.2: JDK版本:JDK1.8 [配置] [1]添加“线程组.Http信息头管理器.httpCookie管理器.HTTP代理服务器”: [2]设置浏览器的“ ...

  6. LNMP(linux+nginx+mysql+php)服务器环境配置【转载】

    本文转载自 园友David_Tang的博客,如有侵权请联系本人及时删除,原文地址: http://www.cnblogs.com/mchina/archive/2012/05/17/2507102.h ...

  7. [JSOI2009]计数问题 二维树状数组BZOJ 1452

    题目描述 一个n*m的方格,初始时每个格子有一个整数权值.接下来每次有2种操作: 改变一个格子的权值: 求一个子矩阵中某种特定权值出现的个数. 输入输出格式 输入格式: 第一行有两个数N,M. 接下来 ...

  8. 递归缓存技术,缓存机制Memoization

    先看一下代码: 再看一下执行时间: 可以看出第一个阶乘的执行时间是3ms,后面的由于缓存了之前的计算结果,所以直接返回结果. 原理就是缓存之前的计算,避免重复计算.关键在于建立缓存数组. 可以看一下执 ...

  9. openmpi-3.0.1超线程报错问题

    先简单记录一下,虽然还有一些疑惑没有解决. 之前安装openmpi是用的命令安装,版本比较低,mfix并行总出现死锁问题,于是想看看是不是openmpi版本导致,虽然目前还未找到具体原因,但是先记录下 ...

  10. asp.net 同时执行js事件和代码事件 导出 excel

     onclick="return bnQuery_onclick()" onserverclick="bnQuery_ServerClick"   public ...