html 占位文本,跨浏览器的HTML5占位文本(PlaceHolder)方案
HTML5里面一个非常不错的扩展功能就是可以在文本框上面增加占位文本。占位文本(PlaceHolder)是指当一个文本框没有被focus的时候显示的是提示文字,当他被点击之后就显示空白。这个功能很不错,但是并不是所有的浏览器都支持。这篇文章就来讨论一下怎样用比较简单的方法可以让所有浏览器都支持这个特性。
传统的解决办法
在我们有这个属性之前,我们一般是通过Javascript来实现这个效果。 这段文字被设置在value属性里面,当聚焦了之后,检验文本框的值是否等于默认值,如果是则清空文本框。当文本框失去焦点的时候,再检查是否为空,为空则再写上默认值。这个方法很不高效,而且每个文本框都得去检测。
jQueyr 占位文本
现在有了HTML5之后,通过placeholder属性来设置就比value设置语义化的多了。然而,这个属性并不是所有的浏览器都支持,所以我们需要jQuery和Modernizr的支持。
在这里Modernizr是用来检测浏览器是否支持一些HTML5属性的。如果浏览器不支持,那么再运行jQuery代码。它会先找到所有带PlaceHolder属性的元素,然后存储在一个变量中。然后会将元素的value和这个变量对比,如果为空则显示placeholder里面的内容,并且会增加一个”placeholder”的css样式。
如果你想在你的网站中使用这个东西,需要引入jQuery和Modernizr,注意放置在合适的路径下,然后把下面的代码复制进去。
$(document).ready(function(){if(!Modernizr.input.placeholder){
$('[placeholder]').focus(function() {varinput=$(this);if(input.val()==input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {varinput=$(this);if(input.val()==''||input.val()==input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {varinput=$(this);if(input.val()==input.attr('placeholder')) {
input.val('');
}
})
});
}
去除Webkit搜索框样式
Webkit内核的浏览器会给搜索框增加一些额外的样式,通过下面的CSS可以去掉这个样式:
input[type=search] {-webkit-appearance: none;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
display: none;
}
html 占位文本,跨浏览器的HTML5占位文本(PlaceHolder)方案相关推荐
- 实现跨浏览器的HTML5占位符
译自:http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text 译者:蒋宇捷,转载请标明出处(http://b ...
- html文本框 控件,HTML5的文本框表单控件
E-mail表单控件 E-mail表单控件与文本框相似,作用是链接电邮地址,为元素设置type="email":即可配置一个E-mail地址表单控件.只有支持HTML5email属 ...
- html 引入js 兼容,JS跨浏览器兼容性解决思路及方案汇总,常见JS兼容性知识点汇总...
上篇文章我们介绍了,处理CSS浏览器兼容性的4个解决方案:浏览器CSS样式初始化.浏览器私有属性,CSS hack语法和自动化插件,有兴趣的可以看看,链接放到本文结尾 本文主要介绍JS的跨浏览器兼容性 ...
- html5 占位图片,placeholder.js-可在浏览器端生成占位图片的js插件
placeholder.js是一款轻量级的可在浏览器端生成占位图片的javascript库插件.该图片占位插件大小小于1kb,不依赖于任何js框架,并提供完善的配置参数和简单的方法.它的特点还有: 不 ...
- 实现跨浏览器html5表单验证
html5表单添加了很多类型的表单,而且还自带验证的功能.在移动端,手机等设备能够根据不同的input类型弹出不同的键盘,例如iphone弹的键盘 <input type="email ...
- 文本视图(UITextView)占位符Swift
本文翻译自:Text View (UITextView) Placeholder Swift I'm making an application which uses a UITextView . 我 ...
- 跨浏览器CSS文本模糊效果
Chrome浏览器支持CSS3滤镜filter:blur方法,可以简单的实现文本模糊效果. 但是该方法在Firefox(35版本以前).IE和opera下面不完全兼容.要实现跨浏览器文本模糊效果,可以 ...
- html5 特效框架,带37种3D动画特效的跨浏览器CSS3动画框架
AllAnimation.css是一款带37种3D动画特效的跨浏览器CSS3动画框架.它可以轻松的制作出各种CSS3 3D动画效果,可以在移动手机上使用.并且使用极其简单,使用时只需要添加相应的cla ...
- html5图片灰度显示,实现各浏览器html图像灰度 跨浏览器图像灰度(grayscale)解决方案...
实现图像灰度(grayscale)最初有ie6推出的专属属性filter实现,后来在css3里w3c实现了标准的filter,但是在不同浏览器的实现程度不一样,因此需要一种浏览器兼容的解决方案. IE ...
最新文章
- 程序员部落酋长 Joel 之洞见
- Ubuntu 每日技巧- 自动备份Ubuntu 14.04到Box云存储上
- WPF显示富文本emoji表情+文本(类似微信)
- 诗与远方:无题(五)
- 如何看待清华大学生命科学学院削减研究生补助的行为?
- webpack4.x实战七,生产模式和开发模式分开打包
- C# MysqlHelper 执行reader时,遇到致命错误或者超时
- C++虚函数(多态性)
- 百度网盘高速下载资源
- CAD工具——批量打印
- 美国卡内基梅隆大学计算机排名,卡内基梅隆大学世界排名
- 服务器的正向代理与反向代理
- 三个臭皮匠赛过诸葛亮!白话Blending和Bagging
- JS Base64加密解密
- android高德hud导航,教你一招,手机导航秒变HUD抬头显示
- 【ORM框架】Python ORM框架——peewee(详细)
- 树莓派4b常用资料汇总
- Linux--开发工具
- 以太坊Geth通过私钥导入新地址到钱包步骤(3种方法)
- Echarts-3D渐变色柱状图组件