首页天道酬勤设置成隐藏属性,input隐藏属性设置

设置成隐藏属性,input隐藏属性设置

张世龙 05-06 05:05 28次浏览

HTML5新引入了许多有趣的新特征; 有些出现在HTML中,有些是JavaScript API,都很有用。 其中最喜欢的特征之一是文本框(INPUT )的placeholder属性。 可以使用placeholder属性在文本框中显示提示信息。 如果在文本框中输入任何信息,提示信息将隐藏。 虽然以前可能已经多次看到过这种效果,但其中大部分都是通过JavaScript实现的,但现在HTML5提供了本机支持,效果更好

HTML代码

你也看到了,你只需要在文本框的声明标签中添加placeholder属性。 完全不需要JavaScript来产生这个效果。

检查浏览器是否支持Placeholder属性

因为placeholder是新属性,所以必须检查浏览器是否支持它。 例如,IE6、IE8肯定不支持:

函数hasplaceholdersupport (

var input=document.createelement (' input );

输入返回(placeholder );

}

如果用户的浏览器不支持placeholder特性,则必须使用MooTools、Dojo或其他JavaScript工具实现它。

/* mootools调频! */

varfirstnamebox=$(first_name )、

消息=first name box.get (placeholder );

firstNameBox.addEvents({ (

focus: function (

if (第一名称盒. value==message ) { searchBox.value=' '; }

(,

blur :功能() }

if(firstnamebox.value==' ' ) { searchBox.value=message; }

}

);

用CSS美化placeholder

上一篇文章写了用CSS美化鼠标选择的文字的方法。 在进一步研究的过程中,我发现了另一个有趣的CSS功能。 CSS美化输入放置器效果。 用简单的CSS代码美化文本框中的placeholder字符吧。

CSS代码

火狐浏览器的使用方法与谷歌浏览器不太一样。 那些名字很容易理解:

/* all */

:-WebKit-input-placeholder { color : # f00; }

:-moz-placeholder { color : # f00; (/) Firefox19 ) /

3360-ms-input-placeholder { color : # f00; (/) ie ) /

input :-moz-placeholder { color : # f00; }

/* individual: webkit */

# field 2:3360-WebKit-input-placeholder { color : # 00f; }

# field :-WebKit-input-placeholder { color : # 090; 背景:灯光绿色; 文本转换: upper case; }

# field 4:3360-WebKit-input-placeholder { font-style : italic; 文本修饰: overline; letter-spacing:3px; color:#999; }

/* individual: mozilla */

# field 2:3360-moz-placeholder { color : # 00f; }

# field :3360-moz-placeholder { color : # 090; 背景:灯光绿色; 文本转换: upper case; }

# field 4:3360-moz-placeholder { font-style : italic; 文本修饰: overline; letter-spacing:3px; color:#999; }

您可以控制placeholder字符的字体、颜色和样式。 也可以在文本框中以动画形式显示placeholder。 美化你的文本框是一件看起来很小的事情,但对一些交互式网站来说,成功的关键是细节。 虽然目前IE10也只支持placeholder,但是我想使用此本机placeholder效果的人会越来越多。

placeholder怎么用,html指定ie文档模式