HTML5 INPUT placeholder及兼容性处理
HTML5对Web Form做了许多增强,比如input新增的type类型、Form Validation等。Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失。以前要实现这效果都是用JavaScript来控制才能实现:
由于placeholder是个新增属性,目前只有少数浏览器支持,如何检测浏览器是否支持它呢?(更多HTML5/CSS3特性检测可以访问)
function hasPlaceholderSupport() {
return 'placeholder' in document.createElement('input');
}
默认提示文字是灰色的,可以通过CSS来改变文字样式:
/* all */ ::-webkit-input-placeholder { color:#f00; } input:-moz-placeholder { color:#f00; }/* individual: webkit */ #field2::-webkit-input-placeholder { color:#00f; } #field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; } #field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }/* individual: mozilla */ #field2:-moz-placeholder { color:#00f; } #field3:-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; } #field4:-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
兼容其他不支持placeholder的浏览器:
var PlaceHolder = {
_support: (function() {
return 'placeholder' in document.createElement('input');
})(),
//提示文字的样式,需要在页面中其他位置定义
className: 'abc',
init: function() {
if (!PlaceHolder._support) {
//未对textarea处理,需要的自己加上
var inputs = document.getElementsByTagName('input');
PlaceHolder.create(inputs);
}
},
create: function(inputs) {
var input;
if (!inputs.length) {
inputs = [inputs];
}
for (var i = 0, length = inputs.length; i <length; i++) {
input = inputs[i];
if (!PlaceHolder._support && input.attributes && input.attributes.placeholder) {
PlaceHolder._setValue(input);
input.addEventListener('focus', function(e) {
if (this.value === this.attributes.placeholder.nodeValue) {
this.value = '';
this.className = '';
}
}, false);
input.addEventListener('blur', function(e) {
if (this.value === '') {
PlaceHolder._setValue(this);
}
}, false);
}
}
},
_setValue: function(input) {
input.value = input.attributes.placeholder.nodeValue;
input.className = PlaceHolder.className;
}
};
//页面初始化时对所有input做初始化
//PlaceHolder.init();
//或者单独设置某个元素
//PlaceHolder.create(document.getElementById('t1'));
文章转自:http://www.cnblogs.com/dachie/archive/2012/08/10/2632422.html
转载于:https://blog.51cto.com/zengxiangzhen/1545663
HTML5 INPUT placeholder及兼容性处理相关推荐
- HTML5 input placeholder 颜色 改动
David Murdoch:Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用: CSS input[placeholder], [placeholder], ...
- 使用CSS修改HTML5 input placeholder颜色
有三种实现方式:伪元素(pseudo-elements).伪类( pseudo-classes)和Notihing. WebKit和Blink(Safari,Google Chrome, Opera1 ...
- HTML5 input placeholder 颜色修改示例
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {} input:-moz-placeholder, tex ...
- html5 搜索提示文字,HTML5网页placeholder美化input背景提示文字教程
这篇文章主要为大家详细介绍了HTML5网页placeholder美化input背景提示文字教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴. 今天要给大家介绍的 ...
- 用jquery实现html5的placeholder功能
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/QianShouYuZhiBo/article/details/28913501 html5的plac ...
- html5 规定输入字段,HTML5 Input属性详解
本篇教程探讨了HTML5 Input属性详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < value 属性 value 属性规定输入字段的初始值: rea ...
- html placeholder 兼容问题,解决placeholder的兼容性
placeholder在不支持html5的低版本的浏览器中,placeholder属性是无效的,ie9及以下的ie浏览器不兼该属性. 网上找到了解决办法: 解决思路是用input的value值来模拟p ...
- HTML5之placeholder属性
转自:http://www.webhek.com/post/html5-placeholder.html HTML5里新引入很多有趣的新特征:有些体现在HTML里,有些是JavaScript API, ...
- 简单实现IE9及以下对placeholder的兼容性
placeholder属性的出现使input输入框不再单调,而且可以对用户做一个对输入内容的提醒或者指引,起到了很好的作用.但是 但是IE9及IE9以下不支持这个属性,这就让人很恼火呀,毕竟中国还有好 ...
最新文章
- Subversion For Windows的安装与使用
- 减少过敏反应的生活细节
- 【PM模块】维护订单基本处理流程——实际操作
- IOS 输入框 placeholder字体的颜色
- write up 杂项:啊哒
- Angular 内容投影 content projection 关于选择器问题的单步调试
- POJ1821 Fence
- Linux笔记-centos中大量tcp状态为TIME_WAIT
- ubuntu+intellij IDEA+android环境配置
- Flash已死,有事烧纸!
- php 苹果支付验证,PHP实现Apple应用内购服务端验证
- Linux低分辨率下时钟中断调用流程
- 切比雪夫多项式拟合 matlab,怎么用Matlab来实现切比雪夫多项式拟合?
- android倒计时器
- Everedit软件下载、安装和运行(免注册)
- Golang 获取月初和月底日期
- 学校运动会广播稿计算机,学校运动会广播稿
- 《人月神话》作者去世,我们都曾读过他的书
- 手机屏幕尺寸、分辨率,图像像素、分辨率、实际大小解惑
- 2019年5大企业网盘对比
热门文章
- 加速键使用方法详解(示例)
- 在asp.net中读取XML文件信息的4种方法
- 折线分割平面(hdoj 2050,动态规划递推)
- 安装python爬虫scrapy踩过的那些坑和编程外的思考
- 在KVM主机和虚拟机之间共享目录
- Shell主要逻辑源码级分析(1)——SHELL运行流程
- 分布式服务框架 dubbo/dubbox 入门示例(转)
- JPA的Column注解总结
- 《ActionScript3.0 游戏设计基础(第二版)》随书代码和附赠章节(共4章)
- linux out of memory分析(OOM)