IE678910不兼容H5的placeholder属性,需要JS解决
两种方法的思路
一、使用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解决的更多相关文章
- [干货]兼容HTML5的Placeholder属性-更新版v0.10102013
HTML5对Web Form做了许多增强,比如input新增的type类型.Form Validation等.Placeholder是HTML5新增的另一个属性,当input或者textarea设置了 ...
- ie8不兼容input的placeholder属性但是要实现其效果的方法
通过学习前辈的思想,个人想法整理如下: 通过两个元素标签,仿造出placeholder的内容 使用position定位好两个元素标签 第一要隐藏两个元素标签display:none,在<!--[ ...
- 修复IE9.0下PlaceHolder 属性问题js脚本
在开发前端系统时候碰到这种兼容问题,以下是个人解决方案,希望能给其他人带来帮助: var JPlaceHolder = { //检测 _check: function () { return 'pla ...
- 兼容ie10以下版本的placeholder属性
<script src="${ctx }/js/jquery.placeholder.js" type="text/javascript">< ...
- placeholder属性兼容ie8
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- IE如何兼容placeholder属性
在前端开发中,经常需要为input设置placeholder属性,但是placeholder是HTML5新属性,在IE10以下不兼容,那么如何完美兼容呢? 网上搜索了一下,其实也挺简单的,可以采用以下 ...
- input 的 placeholder属性在IE8下的兼容处理
placeholder是input标签的新属性,在使用的时候有两个问题: 1.IE8 下不兼容 处理思路: 如果浏览器不识别placeholder属性,给input添加类名placeholder,模仿 ...
- 改进《完美让IE兼容input placeholder属性的jquery实现》的不完美
<完美让IE兼容input placeholder属性的jquery实现>中的代码在IE9以下浏览器中会出错,原因是因为ie9以下的浏览器对input的标签的解释不同. 例如对以下文本框的 ...
- HTML5表单提示placeholder属性兼容IE
placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 <inpu ...
随机推荐
- 父级(display:none)隐藏时,子节点的高度获取。
当父节点display:none的时候,子节点的高度是0获取不到. 解决办法:用visibility替换display就可以了.
- C# 接口(2)
接口的实现方式. 接口的实现分两种: 1 显示实现接口 2 实现接口. 我们前面所得的接口的实现均为实现接口.也就是第二种方式.那么我们来来看第第一种实现方式: interface IHuman { ...
- Struts2学习第3天--OGNL、EL、值栈
JAVA中的OGNL: 1 调用对象的方法: 2 访问对象的静态方法: 3 获取OGNLContext.Root中的数据. User: 4 访问Context: 关键还是在Struts2环境中的使用: ...
- 【离散数学】SDUT OJ 补图
补图 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Problem Description 题目给出一个无向图,求该无向图关 ...
- iOS导入c++语言的静态库之后编译不过,先要检查是否导入了libstdc++
iOS项目中引入c++库,编译链接时报如下错: "std::string::_Rep::_M_destroy(std::allocator<char> const&)&q ...
- 4、numpy+pandas速查手册
<Python数据分析常用手册>一.NumPy和Pandas篇 一.常用链接: 1.Python官网:https://www.python.org/2.各种库的whl离线安装包:http: ...
- audio.play dom对象 JQ不支持play
*/ PausePlayVoice:function() { $("#spPauseAudio").click(function() { ...
- flex弹性布局,好用
一直不太喜欢自己布局前端页面,都是扒别人的页面 ,最近在练习小程序,页面无处可扒,只有自己布局 发现flex弹性布局真好用,布局起来很简单,实现的效果也很好,赞 以后可以自己写一点前端了,哈哈
- 安装使用Redis过程中可能出现的错误收集
1.使用make test测试编译状态报错 cd src && make test make[1]: Entering directory `/usr/local/redis-3.2. ...
- ST第一章基础概念
1.1程序由程序.数据.文档 测试对象 软件测试目的:发现尽可能多的软件缺陷,并期望通过改错把缺陷统统排除,提高软件质量 1.2 ST分类 1.2.1 方式分类 (1)静态测试 :不执行被测对象程序代 ...