两种方法的思路

一、使用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. Castle Windsor 注册组件

    1.逐个注册组件即对每个接口通过代码指定其实现类,代码: container.Register( Component.For<IMyService>() //接口 .Implemented ...

  2. 「BZOJ 2152」聪聪可可

    题目链接 戳这 \(Solution\) 这道题看起来就像点分治对吧.没错就是点分治. 什么是点分治 如果你不会点分治,可以去看看这儿 现在看到这里,首先确保你已经会了点分治,如果不会你还往下看,听不 ...

  3. lfs原理

  4. day02.2-列表内置方法

    列表——list的定义:test = [1,12,9,"age",["zizai","jiapu"],"alex"] 特 ...

  5. kali linux之操作系统识别/SMB扫描

    操作系统识别技术种类很多,好产品采用多种技术结合 查看TTL值: linux:64(1-64) 某些unix:255 windows:128(65-128) nmap 被动操作系统识别 p0f ——— ...

  6. php代码审计5审计命令执行漏洞

    命令执行漏洞:通过易受攻击的应用程序在主机操作系统上执行任意命令,用户提供的数据(表单,cookie,http头等)未过滤 挖掘思路:用户能够控制函数输入,存在可执行代码的危险函数 命令执行和代码执行 ...

  7. SignalR-001

    SignalR 是什么? ASP.NET Core SignalR 是一个开放源代码库,它简化了向应用添加实时 web 功能. 实时 web 功能立即使服务器端代码能够将内容推送到客户端. 一.有这么 ...

  8. luoguP4213 [模板]杜教筛

    https://www.luogu.org/problemnew/show/P4213 同 bzoj3944 考虑用杜教筛求出莫比乌斯函数前缀和,第二问随便过,第一问用莫比乌斯反演来做,中间的整除分块 ...

  9. Reviewing notes 1.1 of Analytic geometry

    Chapter 1 Vector Algebra ♦ Vector Space Vector and vector space A vector is described as a quantity ...

  10. Android蓝牙连接自动测试工具

    蓝牙连接自动测试工具 1.需求产生 开发不按着需求走都是耍流氓且浪费时间.此工具的需求产生是研发人员在开发产品时涉及到蓝牙驱动和安卓蓝牙两个东西.但是呢,蓝牙不太稳定,那么工作来了.就需要研发人员一边 ...