html5实现完美搜索框



前面我们已经了解到一些html5中新增的表单验证属性,相当实用,直接实现了之前需要用js才能实现的功能。我们通常做的搜索框也属于表单内容,就是一个text类型的input和一个submit类型的input
Type=”text”的input是最基本的input类型,仅针对它,html5就新增了几个非常人性化的属性:placeholderautofocusspeech
Placeholder,例:<input type="text" placeholder="输入搜索内容"> 。一目了然,它就是用来设置初始值的,而且初始值的颜色为灰色,一旦input中输入新内容,这个值就消失了。这个属性真真是太人性化了。
Autofocus,例:<input type="text" autofocus>。“自动聚焦”,即当进入一个页面时,加有此属性的input输入框会自动获取焦点,也就是光标第一时间自动停留在该input上,用户可以在进入页面后直接输入内容,而省去了移动鼠标到input上并点击这一步骤。如果一个页面上有两个以上input使用了此属性,那么浏览器会自动选择最后一个使用它的input来聚焦。
Speech,语音输入功能属性。大家用智能手机的时候应该都见识过输入框里那个小话筒的语音输入功能吧,就是用的这个属性。不过目前大部分浏览器都还没有实现这些接口,只有基于webkit核心的浏览器(如Chrome)才能使用它,且需要加上x-webkit前缀。也就是说x-webkit-speechwebkit内核浏览器特有的语音识别工具,即私有属性。用法:<input type="text" x-webkit-speech>。
大家可以将下面的code直接拷贝并另存为网页,在Chrome浏览器里预览并体验一下,很赞的哦~
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css"><!--
.searchForm input {
font-size:12px;
}
.searchForm input[type="text"] {
background:#fff;
border:1px solid #f00;
color:#999;
float:left;
height:28px;
line-height:28px;
outline:none;
padding:3px;
width:180px;
}
.searchForm input[type="submit"] {
background:#f90;
border:1px solid #f00;
color:#fff;
cursor:pointer;
display:inline-block;
height:36px;
margin-left:-1px;
padding:0 15px;
vertical-align:middle;
}
.searchForm input[type="submit"]:hover {
background:#f60;
}
--></style>
</head>
 
<body>
 
<form class="searchForm" method="get">
<p>
<input type="text" placeholder="输入搜索内容"> 
<input type="submit" value="点击搜索">
</p>
<p>
<input type="text" autofocus x-webkit-speech>
<input type="submit" value="点击搜索">
</p>
</form>
</body>
</html>
 

Need a translation service?

Please enter your personal details and we will contact you shortly

Words translated by CCJK

146,096,379

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00

Over 95% of our clients recommend our language services to others

Copyright © CCJK Technologies Co., Ltd. 2000-2017. All rights reserved.
TOP