当前位置: 首页 > Web前端 > HTML

inputtype=-search-实现搜索框

时间:2023-04-02 16:59:51 HTML

实现一个文本搜索功能,当需要输入时,键盘回车键的提示会显示为“搜索”。效果如下:一开始~inputtype=text是达不到这个效果的。google了一下,html5中加入的type=search就可以了(不过需要inputtype=search用一个带action属性的form包裹起来)。

取消
但是type=search会有很多默认的样式和行为,这个开发遇到了:默认下拉框会显示搜索历史;输入时会自动弹出“x”,不同手机上“x”的样式不同;IOS手机(测试时iphone6ios10)输入框是椭圆形的。但是我们希望样式按照我们自定义的样式来显示,并且在各个手机上统一。于是几经google,得到了答案:setinputautocomplete="off"去掉弹出下拉框;隐藏默认的"x":input[type="search"]::-webkit-search-cancel-button{display:none;}为ios设置样式,去掉ios下的input椭圆:-webkit-appearance:none;同时不要忘记,如果你想在提交搜索时使用ajax,你可以阻止表单的默认行为:container.on('submit','.input-kw-form',function(事件){event.preventDefault();})