简单HTML5打造内涵搜索框

随着HTML5的深入人心,其越来越多的新功能为大家所用,HTML5新增了不少人性化标签和属性,马上介绍的就是新的表单属性。

操作方法

  • 01

    代码: <input type="text" placeholder="输入 回车搜索" autofocus x-webkit-speech>

  • 02

    简短的几个代码就能实现原本多行JS才能实现的完美交互效果,这就是HTML5略窥一点的赞! placeholder是为了设置初始值,并且这个初始值的颜色为灰色,当input的内容变动时,这个值就消失,它的职责就是给人一种亲和力的指示,十分有爱。 autofocus,顾名思义:自动聚焦,当进入当前页面时,这个input会自动获取焦点,而你可以在打开页面后直接输入东西进行搜索。当autofocus出现两次以上的时候,浏览器会选择最后一个带有autofocus属性的input聚焦。 x-webkit-speech,这个大概不必多解释了,webkit核的浏览器(如Chrome)特有的语音识别工具,给input装上也是再好不过的了,话说Google也给自己的搜索框装上这个工具。

(0)

相关推荐

  • 如何设计出一个完美的搜索框

    小编:UI设计是一个不简单的工作,我们不仅需要把产品设计的好看更要注意它的用户体验.从一个产品的整体感受到一个按钮的展现形式都在我们的考虑范围,所以我们不能忽视每一个细节.今天就带大家来研究一下一个完 ...

  • IE浏览器上面的搜索框去掉方法

    也许大家会纳闷,这么好的东西,去掉干嘛? 是啊,从IE7开始,在IE浏览器上面就多了这个搜索框,可以便捷的去搜索网络。但是,很多用户是从XP时代一路走来,从IE6时代一路走来,他们对这个东西,不用。 ...

  • Win10如何禁用Cortana把Cortana搜索框改成搜索图标

    只需在任务栏上的空白处点击右键,在弹出的右键菜单中显示“搜索”下级菜单。如图: 在“搜索”下级菜单中即可看到“已禁用”选项,选择它即可禁用Cortana微软小娜,你会发现任务栏中的Cortana搜索框 ...

  • win7系统自带的搜索框找不到该怎么办

    很多人进行win7系统下载之后就会发现,其实系统自身携带的搜索框使用起来还是比较方便的,我们可以直接通过这个来搜索一些文件和软件等.可是一些用户却反映这样的一个自带组件,却在需要的时候找不到了,不能直 ...

  • Win10系统关闭搜索框的方法

    Win10系统搜索框占用了任务栏很大的比例,不仅很难看,而且很容易误点.那么应该怎么样关闭Win10系统这个难看的搜索框呢? 只需在任务栏空白处右击鼠标,然后移动鼠标至"搜索",你 ...

  • Win10 Cortana小娜选项没有显示搜索框现象的原因和解决办法

    Cortana小娜选项没有显示搜索框怎么办?Cortana小娜是win10系统推出的一款广受用户喜爱的个人智能助理软件.但是现在却有用户在使用时遇到了win10 Cortana选项中没有"显 ...

  • win10系统任务栏中搜索框去除方法

    用户在安装win10系统后,会在任务栏中显示搜索栏,该搜索栏占据了一部分任务栏的空间,并且对于用户来说,这个搜索栏的作用在工作中并不能为我们提供便捷的操作,所以我们可完全将其去掉,不过一些用户不知道如 ...

  • Win10系统给小娜搜索框添加放大镜、箭头图标的方法

    Win10有自带语音助手小娜,这个功能的确是很不错.刚接触Win10系统的用户,还不是很了解怎么使用这个功能:一些用户反馈自己想要给小娜搜索框添加放大镜.箭头图标,却不知道该如何操作.下面小编就为大家 ...

  • win10开始菜单中的搜索框开启和关闭方法

    相信很多小伙伴都有在使用Windows10系统,那么在其中我们去开启和关闭开始菜单中的搜索框呢?方法很简单,下面小编就来为大家介绍.具体如下:1. 有些小伙伴在安装系统后,开始菜单和任务栏中的搜索框都 ...