让IE下支持Html5的placeholder属性
HTML5对Web Form做了许多增强,比如input新增的type类型、Form Validation等。
Placeholder
是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文
字消失。以前要实现这效果都是用JavaScript来控制才能实现 , firefox、google chrome等表示对其支持 ,
唯独IE存在违和感啊!
例如: <input id="t1" type="text" placeholder="请输入文字" />
介绍一个超强的让IE下支持placeholder的属性插件,同时也兼容其他不支持placeholder的浏览器,代码如下:
代码如下:
$(document).ready(function(){
var doc=document,
inputs=doc.getElementsByTagName('input'),
supportPlaceholder='placeholder'in doc.createElement('input'),
placeholder=function(input){
var text=input.getAttribute('placeholder'),
defaultValue=input.defaultValue;
if(defaultValue==''){
input.value=text
}
input.onfocus=function(){
if(input.value===text)
{
this.value=''
}
};
input.onblur=function(){
if(input.value===''){
this.value=text
}
}
};
if(!supportPlaceholder){
for(var i=0,len=inputs.length;i<len;i++){
var input=inputs[i],
text=input.getAttribute('placeholder');
if(input.type==='text'&&text){
placeholder(input)
}
}
}
});
直接把代码复制下来,保存成一个js文件引用即可,不用再做任何处理,超级便利!
ex
:
这样做的确能让IE的Input显示placeholder属性,但是如果页面上只有一个input还好,如果是多个input,如果出现input没有
填入任何值的话,那么它的空input会自动将placeholder的值填进value里面,从而发生错误.例如:
代码如下:
<input type="text" placeholder="输入商品编码" name="goodscode" id="goodscode" value="123" />
<input type="text" placeholder="输入商品名称" name="goodsname" id="goodsname" value="输入商品名称" />
解决办法就是在后台自己判断啦 , 也许能在上面的js文件里解决 , 以后再研究啦~!
让IE下支持Html5的placeholder属性的更多相关文章
- input 不支持HTML5的placeholder属性
解决方法如下: <input type="text" value="搜索乐高资讯" onfocus="if(this.value=='搜索乐高资 ...
- HTML5之placeholder属性以及如何更改placeholder属性中文字颜色
今天在群里看到群友问了一个这样的问题,就是如何更改placeholder属性中文字的颜色,以前用过这属性,却是没更改过颜色,于是便试了试,中途遇到些问题,查找资料后特来总结一下. 熟悉HTML5的人应 ...
- 转: HTML5之placeholder属性以及如何更改placeholder属性中文字颜色
今天在群里看到群友问了一个这样的问题,就是如何更改placeholder属性中文字的颜色,以前用过这属性,却是没更改过颜色,于是便试了试,中途遇到些问题,查找资料后特来总结一下. 熟悉HTML5的人应 ...
- html5的placeholder属性(IE如何兼容placeholder属性)
界面UI推荐 jquery html5 实现placeholder兼容password IE6 html5的placeholder属性(IE如何兼容placeholder属性) 2013-01-05 ...
- 【工作笔记五】html5的placeholder属性(IE如何兼容placeholder属性)
placeholder属性,IE对其的支持表示无奈,firefox.google chrome表示毫无压力. HTML5对Web Form做了许多增强,比如input新增的type类型.Form Va ...
- Html5 input placeholder 属性字体颜色修改。
这篇文章主要介绍了有关HTML5 input placeholder 颜色修改方面的知识,需要的朋友可以参考下 Chrome支持input=[type=text]占位文本属性,但下列CSS样式 ...
- Html5的placeholder属性(IE兼容)
HTML5对Web Form做了很多增强,比方input新增的type类型.Form Validation等. Placeholder是HTML5新增的还有一个属性,当input或者textarea设 ...
- IE低版本下实现html5的placeholder(表单提示)功能
placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 <inpu ...
- IE不支持HTML5表单属性placeholder的解决办法
1. [代码][JavaScript]代码 (function ($) { $.fn.placeholder = function (options) { var defaults ...
随机推荐
- Django authentication 使用方法
转自 : https://docs.djangoproject.com/en/1.8/topics/auth/customizing/
- 《转》常用Petri网模拟软件工具简介
本文转载自liusj2003,如给您带来不便之处,请联系博主. 首先要介绍的的一个非常有名的Petri 网网站--Petri Nets World: http://www.informatik.uni ...
- wsp反编译
最后出于好奇,我把wsp文件解压缩,看看里面是什么(如果您的机器上的压缩软件不能直接解压,可尝试修改后缀名为cab.).我看到的首先是一个清单文件(manifest.xml),一个DLL文件(Shar ...
- lambda 表达式
C++0x 的语法还是比较简单.下面通过几个例子来介绍下. 先是通过 std::for_each 演示一个简单的例子: ? std::for_each 和 lambda 1 2 3 4 5 6 7 8 ...
- windows下安装coreseek/sphinx
2013年12月8日 17:26:26 注意的地方: 1.配置文件的 数据源, 索引, 服务 这3处配置的路径要写成windows识别的路径,最好是绝对路径 2.安装windows服务的时候,可以不带 ...
- Intellij Idea无法从Controller跳转到视图页面的解决方案
解决方案: 第一步,确认配置了Spring支持,如下图: 一般情况下,配置完上面就可以正常导航了,但是今天要说的不是一般情况,否则也就不说了,如果经过第一步设置后,还是不能正常导航的同学,可以接着看第 ...
- 【leetcode】clone-graph
写在前面的话: 看了看自己的博客,从一月底开始就没怎么更新过,我也确实将近5个月没怎么写代码了.今天突然觉得有些心慌,感觉手都已经生疏了.果然,随便找了道题就卡住了.隐约感觉要用map但又不太记得用法 ...
- JDK1.7 HashMap 源码分析
概述 HashMap是Java里基本的存储Key.Value的一个数据类型,了解它的内部实现,可以帮我们编写出更高效的Java代码. 本文主要分析JDK1.7中HashMap实现,JDK1.8中的Ha ...
- mysql自增字段重排 或 归零
由于删除了某些记录行,所以自增字段不连续了.重排或归零的方法:方法1:truncate table 你的表名//这样不但重新定位自增的字段,而且会将表里的数据全部删除,慎用!方法2:delete fr ...
- Code(poj 1850)
大致题意:(与POJ1496基本一致) 输出某个str字符串在字典中的位置,由于字典是从a=1开始的,因此str的位置值就是 在str前面所有字符串的个数 +1 规定输入的字符串必须是升序排列.不降序 ...