placeholde属性在IE10以下浏览器上的兼容方案
首先,判断浏览器是否支持placeholder属性:目前经验来看placeholder属性在 IE10及以上 才能正常显示,而我们实际项目中往往要求兼容到 IE8
var input = document.createElement('input');
if("placeholder" in input){
alert('支持');
}else{
alert('不支持');
}
(1)如果只需要让不支持placeholder的浏览器能够支持改功能,并不要求支持原生placeholder的浏览器表现一致,那么可以采用如下方法:
Placeholder在不支持html5的低版本的浏览器中,placeholder属性是无效的,非现代浏览器( 例如 IE6-IE9 )是不支持placeholder属性的
function placeholder(nodes,pcolor) {
if(nodes.length && !("placeholder" in document_createElement_x("input"))){
for(i=0;i
var self = nodes[i],
placeholder = self.getAttribute('placeholder') || '';
self.onfocus = function(){
if(self.value == placeholder){
self.value = '';
self.style.color = "";
}
}
self.onblur = function(){
if(self.value == ''){
self.value = placeholder;
self.style.color = pcolor;
}
}
self.value = placeholder;
self.style.color = pcolor;
}
}
}
(2)如果需要自定义样式,并且希望placeholder在所有浏览器下表现一致,可以通过利用label标签模拟一个placeholder的样式放到输入框上,当输入框获得焦点的时候,隐藏label,当输入框失去焦点的时候,显示label。 或者是在input上应用背景图片,获得和失去焦点的时候切换背景图片是否显示。
<script>
$(function(){
$('.for_text').click(function(){
$('.text').focus()
})
$('.text').blur(function(){
$('.for_text').hide();
})
})
</script>
<style>
.for_text{ position:absolute; cursor:text; margin:5px; color:#999;}
.text{ padding:5px;}
</style>
<form>
<label for="text" class="for_text">请输入文本</label>
<input type="text" name="text" class="text"/>
</form>
(3)jquery解决方案:
jQuery('[placeholder]').focus(function() {
var input = jQuery(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = jQuery(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
jQuery(this).find('[placeholder]').each(function() {
var input = jQuery(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
(4)最后一种方法,也是使用最常见的,但是不能改变文本的颜色,使用脚本的方式判断文本框的值,获取焦点或者输入文本的时候,如果为预设的值,那么就清空文本框,失去焦点的时候,如果文本框的值为空,则替换为我们预设的值。推荐使用
<input type="text" name="text" value="请输入文本" class="text"
onFocus="if(this.value=='请输入文本') this.value = ''"
onBlur="if(this.value=='') this.value='请输入文本'"
/>
拓展:
想改变Placeholder文字的颜色,并不想改变输入文字的颜色。正确的写法如下:
::-moz-placeholder{color:red;} //Firefox
::-webkit-input-placeholder{color:red;} //Chrome,Safari
:-ms-input-placeholder{color:red;} //IE10
placeholde属性在IE10以下浏览器上的兼容方案的更多相关文章
- flex在众多手机浏览器上的兼容方案(亲测华为手机自带浏览器)
如果项目使用构建工具,可加autoprefixer来处理,[autoprefixer使用指南] 纯手写css兼容代码,需给每个使用的属性加上属性前缀 /*display: flex;写法*/ span ...
- css3在不同型号手机浏览器上的兼容一览表
网上搜集了css3对不同系统手机浏览器的支持情况(ios/android/winphone)备份一下以便查看. 以下资料由微信产品部"白树"整理, 转载请注明. √:完全支持 ...
- 解决UC浏览器或微信浏览器上flex兼容问题
在UC浏览器上使用display:flex;时会不起作用,要加上兼容性写法,如下 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ disp ...
- 有关parent.frame.cols在firefox浏览器上不兼容的问题解决
IE(不兼容FireFox): if(parent.myFrame.cols == "199,7,*") { parent.myFrame.cols="0,7,*&quo ...
- 移动端浏览器和微信浏览器上禁止body的滚动条
一般禁止body滚动的做法就是设置overflow:hidden. 但是很奇怪的发现在移动端浏览器和微信浏览器上这个不起作用,然后我分析了我的写法,就是在body上加了一个class去定义属性,然后改 ...
- 利用Jquery使用HTML5的FormData属性实现对文件的上传
1.利用Jquery使用HTML5的FormData属性实现对文件的上传 在HTML5以前我们如果需要实现文件上传服务器等功能的时候,有时候我们不得不依赖于FLASH去实现,而在HTML5到来之后,我 ...
- 利用ChromeCROSS可以在chrome浏览器上调试跨域代码
利用ChromeCROSS可以在chrome浏览器上调试跨域代码 1.下载ChromeCROSS文件,可百度下载,或者在我的百度云上下载:链接: https://pan.baidu.com/s/10_ ...
- 使用CSS里的user-select属性控制用户在页面上选中的内容
CSS里的user-select属性用来禁止用户用鼠标在页面上选中文字.图片等,也就是,让页面内容不可选.也可以只允许用户选中文字,或者全部都放开,用户可以同时选中文字.还包括文本里的图片.视频等其它 ...
- 如何上传网站程序(文件浏览器上传网页、FileZilla上传网站程序)
问题场景: 网页制作完成后,程序需上传至虚拟主机. 注意事项: Windows系统的主机请将全部网页文件直接上传到FTP根目录,即 / . Linux系统的主机请将全部网页文件直接上传到 /htdoc ...
随机推荐
- git自动部署到服务器
1.现在服务器配置空仓库 mkdir -p test/project.git chmod 777 test cd test/project.git/ git init --bare . cd .. c ...
- 数据库六大约束用法:主键(primary key)、外键(foreign key)、非空(not null)、默认(default)、检查(check)、唯一(unique)
1. 数据库有六大约束 主键(primary key) 外键(foreign key):被参照的键必须有唯一约束或是主键 非空(not null) 默认(default) 检查(check):orac ...
- Django—Form、ModelForm
一.Form form.py from django import forms from django.core.exceptions import ValidationError from djan ...
- Scyther
1.Security Protocol :a domain analysis 一个安全协议描述了很多的行为,每一个行为称为角色,例如触发角色和 接受角色,一个系统有多个通信代理组成,每一个代理扮演 ...
- Docker动态给容器Container暴露端口
查看Container的IP地址 docker inspect <container name or id>| grep IPAddress 查看Container的映射的端口 docke ...
- ORACLE安装报错解决
今天在虚拟机中安装了一个WINDOWS系统,用于安装oracle服务器:从安装到使用中出现了很多的问题,把这些问题解决掉,花了不少时间,查了不少的资料. 第一个,我在安装过程中,出现了ORA-0092 ...
- win10家庭版升级为专业版(win10专业版激活方法)
替换专业版密钥 1.在win10家庭版桌面上鼠标右键点击[此电脑]-[属性],点击右下角的[更改产品密钥] 2.也可以点击开始-设置-更新和安全-激活-[更改产品密钥] 3.输入要升级的win10版本 ...
- URL包里的URL.getpath()对路径中空格识别为%20的处理办法
方法(1),使用repaceAll("%20",' ')替换后,只能解决空格问题.但是路径中包含%和中文就不行了. 方法(2),使用URLDecoder.decode(str,&q ...
- 连接数据库出现java.sql.SQLException: Unknown system variable 'tx_isolation'
问题分析 :mysql-connector-java的版本太低,数据库的版本太高 因此将mysql-connector-java升级到最新版本就解 .或者降低MySQL的版本.我之前用的是8.0版本 ...
- FFT快速傅里叶变换算法
1.FFT算法概要: FFT(Fast Fourier Transformation)是离散傅氏变换(DFT)的快速算法.即为快速傅氏变换.它是根据离散傅氏变换的奇.偶.虚.实等特性,对离散傅立叶变换 ...