首先,判断浏览器是否支持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以下浏览器上的兼容方案的更多相关文章

  1. flex在众多手机浏览器上的兼容方案(亲测华为手机自带浏览器)

    如果项目使用构建工具,可加autoprefixer来处理,[autoprefixer使用指南] 纯手写css兼容代码,需给每个使用的属性加上属性前缀 /*display: flex;写法*/ span ...

  2. css3在不同型号手机浏览器上的兼容一览表

    网上搜集了css3对不同系统手机浏览器的支持情况(ios/android/winphone)备份一下以便查看.  以下资料由微信产品部"白树"整理, 转载请注明. √:完全支持   ...

  3. 解决UC浏览器或微信浏览器上flex兼容问题

    在UC浏览器上使用display:flex;时会不起作用,要加上兼容性写法,如下 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ disp ...

  4. 有关parent.frame.cols在firefox浏览器上不兼容的问题解决

    IE(不兼容FireFox): if(parent.myFrame.cols == "199,7,*") { parent.myFrame.cols="0,7,*&quo ...

  5. 移动端浏览器和微信浏览器上禁止body的滚动条

    一般禁止body滚动的做法就是设置overflow:hidden. 但是很奇怪的发现在移动端浏览器和微信浏览器上这个不起作用,然后我分析了我的写法,就是在body上加了一个class去定义属性,然后改 ...

  6. 利用Jquery使用HTML5的FormData属性实现对文件的上传

    1.利用Jquery使用HTML5的FormData属性实现对文件的上传 在HTML5以前我们如果需要实现文件上传服务器等功能的时候,有时候我们不得不依赖于FLASH去实现,而在HTML5到来之后,我 ...

  7. 利用ChromeCROSS可以在chrome浏览器上调试跨域代码

    利用ChromeCROSS可以在chrome浏览器上调试跨域代码 1.下载ChromeCROSS文件,可百度下载,或者在我的百度云上下载:链接: https://pan.baidu.com/s/10_ ...

  8. 使用CSS里的user-select属性控制用户在页面上选中的内容

    CSS里的user-select属性用来禁止用户用鼠标在页面上选中文字.图片等,也就是,让页面内容不可选.也可以只允许用户选中文字,或者全部都放开,用户可以同时选中文字.还包括文本里的图片.视频等其它 ...

  9. 如何上传网站程序(文件浏览器上传网页、FileZilla上传网站程序)

    问题场景: 网页制作完成后,程序需上传至虚拟主机. 注意事项: Windows系统的主机请将全部网页文件直接上传到FTP根目录,即 / . Linux系统的主机请将全部网页文件直接上传到 /htdoc ...

随机推荐

  1. 规范开发目录 及 webpack多环境打包文件配置

    规范开发目录 普通项目 开发目录: ├── project-name ├── README.md ├── .gitignore ├── assets ├── ├── js ├── ├── css ├─ ...

  2. SpringBoot相关错误

    1.org.springframework.boot.builder.SpringApplicationBuilder.<init>([Ljava/lang/Object;)V 搭建spr ...

  3. java----tomcat

    下载: 测试使用一般下载zip格式,在服务器上布置tomcat使用直接安装格式(install) https://tomcat.apache.org/download-90.cgi 使用 在windo ...

  4. linux 相关( 随时更新)

    Linux笔记: 本地文件传到服务器上: scp -P8022 /文件路径 niehaidong@101.201.75.57:/tmp/ 从服务器上到本地 scp -P8022  niehaidong ...

  5. 2018年最新JAVA面试题总结之框架(4)

    转自于:https://zhuanlan.zhihu.com/p/40098726 1.谈谈对spring框架的了解 ,spring有什么作用(IOC,AOP),spring的核心是什么?回答:Spr ...

  6. openstack虚拟机rescue模式

    nova rescue vm_instance es.ops 20190426 linux虚拟机在出现类似kernel panic后,根据panic信息以及故障前的操作,定位问题的发生点,进行修复 n ...

  7. 理解go的闭包

    package main import ( "fmt" ) func test(a int) { a++ fmt.Println(a) } func test2() func() ...

  8. sqlserver2008 触发器备份 20170811

    -------------触发器-----------------------------------------------base-----NO if (object_id('trigger_JP ...

  9. HTTP/1.1 chunked 解码

    0.简介 1.定义 RFC定义 https://tools.ietf.org/html/rfc2616#section-3.6.1 Chunked-Body = *chunk last-chunk t ...

  10. 课堂小记---JavaScript(3)

    操作DOM var newDOM=DOM元素.cloneNode(参数); 克隆(复制)当前节点,参数默认为false只复制当前节点元素.参数为true时复制当前元素及其后代和所有属性. day06 ...