HTML5里面一个非常不错的扩展功能就是可以在文本框上面增加占位文本。占位文本(PlaceHolder)是指当一个文本框没有被focus的
时候显示的是提示文字,当他被点击之后就显示空白。这个功能很不错,但是并不是所有的浏览器都支持。这篇文章就来讨论一下怎样用比较简单的方法可以让所有
浏览器都支持这个特性。
这里是例子
这里可以下载
传统的解决办法
在我们有这个属性之前,我们一般是通过Javascript来实现这个效果。
这段文字被设置在value属性里面,当聚焦了之后,检验文本框的值是否等于默认值,如果是则清空文本框。当文本框失去焦点的时候,再检查是否为空,为空
则再写上默认值。这个方法很不高效,而且每个文本框都得去检测。
<input
type
="text"
value
="Search"
onfocus
="if (this.value == 'Search') {this.value = '';}"
onblur
="if (this.value == '') {this.value = 'Search';}"
>
|
jQueyr 占位文本
现在有了HTML5之后,通过placeholder属性来设置就比value设置语义化的多了。然而,这个属性并不是所有的浏览器都支持,所以我们需要jQuery和Modernizr的支持。
在这里Modernizr是用来检测浏览器是否支持一些HTML5属性的。如果浏览器不支持,那么再运行jQuery代码。他会先找到所有带
PlaceHolder属性的元素,然后存储在一个变量中。然后会将元素的value和这个变量对比,如果为空则显示placeholder里面的内容,
并且会增加一个”placeholder”的css样式。
如果你想在你的网站中使用这个东西,需要引入jQuery
和Modernizr
,注意放置在合适的路径下,然后把下面的代码复制进去。
<
script src=
"jquery.js"
></
script>
<
script src=
"modernizr.js"
></
script>
$(
document)
.ready
(
function
(
)
{
if
(
!
Modernizr.input
.placeholder
)
{
$(
'[placeholder]'
)
.focus
(
function
(
)
{
var
input =
$(
this
)
;
if
(
input.val
(
)
==
input.attr
(
'placeholder'
)
)
{
input.val
(
''
)
;
input.removeClass
(
'placeholder'
)
;
}
}
)
.blur
(
function
(
)
{
var
input =
$(
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
(
)
{
var
input =
$(
this
)
;
if
(
input.val
(
)
==
input.attr
(
'placeholder'
)
)
{
input.val
(
''
)
;
}
}
)
}
)
;
}
</
script>
|
去除Webkit搜索框样式
Webkit内核的浏览器会给搜索框增加一些额外的样式,通过下面的CSS可以去掉这个样式:
input[
type=
search]
{
-webkit-appearance:
none
;
}
input[
type=
"search"
]
:
:-webkit-search-decoration
,
input[
type=
"search"
]
:
:-webkit-search-cancel-button
{
display
:
none
;
}
引用地址:http://t.andycn.com/tb.php?sc=1e5b25&id=83
分享到:
相关推荐
自定义占位文本(placeholder)的样式 当我们对input元素或者textarea元素写CSS样式的时候, 如果需要自定义占位文本(也就是placeholder)的样式的时候怎么办? CSS有一个伪元素选择器::placeholder可以解决我们的问题. ...
此jQuery Placeholder插件是HTML5占位符属性的增强polyfill。 特征 跨浏览器和跨样式 支持所有输入类型,密码,文本区域,文本,电子邮件,搜索,URL等。 稳健:它的行为完全符合规范中定义HTML5占位符 规范现代...
这将确保ng-placeholder文本值可在所有浏览器中正常运行,并尽可能使用HTML5功能。 您也可以使用以下格式: <input type="text" ng-placeholder="This is placeholder text" /> 执照 该代码已获得MIT的许可...
Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用: CSS 复制代码代码如下: input[placeholder], [placeholder]...我在浏览器里安装了jQuery占位文本插件,但仍然无用。(!important只有IE7和firefo
jQuery Placeholder 是一个实用程序,用于在 IE 和非 html5 兼容浏览器中启用 HTML5 占位符文本,由开发,现已集成到 Rails 资产管道中。 有关更多详细信息,请参阅 。 安装 将此行添加到应用程序的 Gemfile 中: ...
placeholder 属性是 HTML5 中的新属性,俗名叫“占位符”,功能类似于输入框在得到焦点时,时面的默认值会变成空白,当失去焦点时又会显示默认的文本,我想大家一定使用 js/jquery制作过这样的效果。目前只有在...
EnablePlaceholder jQuery插件一个非常简单轻巧的(1.7Kb)jQuery插件,它针对旧浏览器启用HTML5占位符行为,着眼于KISS原理,它不支持密码占位符。 与现有的许多其他占位符插件相比,我认为最好在搜索输入,文本...
多 亏了HTML5的 local storage ,我们可以让高级浏览器"记住"我们输入的内容,就算后来浏览器关闭或者重新刷新也不受影响。尽管不是所有的浏览器都支持,但是最关键的 Internet Explorer 8, Safari 4, Firefox 3.5....
特征适用于文本和密码输入仅在用户开始输入时隐藏占位符$ .fn.val和$ .fn.prop正确获取/设置值$ .fn.attr()正确获取/设置占位符属性支持AMD用法 $('[placeholder]').placeholder(options)选项force (boolean, ...
在输入焦点时擦除的文本占位符。 它缺少 IE 6-9。 用例示例: <input type="text" placeholder="{{i18n.input_placeholder}}" /> 揭示 出现在密码输入字段上的眼睛图标,允许用户以纯文本形式显示密码。 这...
HTML5 1、WEB基础知识(了解) 1、Internet - 网 由若干台电脑、手机、平板 通过 网线(WIFI) 连接起来的结构 2、基于Internet上的程序 1、C / S 结构 Client / Server 特点:必须通过指定的客户端软件才能访问...
ZUI是一个开源HTML5前端实践方案,帮助你快速构现代跨屏应用。ZUI 1.9.1 更新日志:2019-05-10CSS基础:优化了默认字体清单,调整了“微软雅黑”字体的权重,将其放置在字体清单的末尾,增加了“思源黑体”和“思源...
该软件包旨在用于快速生成具有特定大小,颜色和文本的占位符图像。 要求 PHP 7.0或更高版本 GD扩展 用法 确保在composer.json中需要此软件包: composer require nicoverbruggen/image-generator 请参见,用于生成...
协作编辑器,支持基于Quill和ShareDB的作者身份显示,图像占位符和CJK字符组成。 特征 运营转型(OT) 该文档由一系列操作表示: insert , delete和retain 。 文档的每次修改也可以通过一系列OT操作来表示。 这样...
除了标签内的文本内容(例如标题,值,占位符等)外,还可以与任何html参数一起使用。 功能 翻译成 将页面翻译成给定的目标语言。 句法 orb . translateTo ( Object language ) ; 例 orb . translateTo ( pt_br )...