H5 input type=search 搜索按钮的设置

2017-09-27

最近遇到一个关于input type=search的问题，在网上找到一个很好的解决方案，贴出来记录一下。

问题：
设计搜索框时，如果单单使用input type=search 会导致一些手机的输入法不显示搜索按钮只显示换行如：

解决办法：
在input标签外嵌套form标签即可解决。

1
2
3

<form action="#">
    <input type="search" />
</form>

但是，要注意：
如果<form></form>表单中只有一个<input type="text"/>，则使文本框获取焦点，并单击回车，form会自动提交。提交路径为action属性拼接到当前路径（action属性默认为空字符串，如果form没有action属性，则提交路径与当前路径相同）。解决办法：
1、设置成<form onsubmit="return false;">
2、增加一个无name属性的隐藏文本框<input type="text" style="display:none;/>
3、监听input的keydown事件。

input.addEventListener('keydown', function(e){
    var keywd = e.target.value;
    if(event.keyCode == 13 && keywd) { 
        e.preventDefault();
    } 
});

原文：https://blog.csdn.net/newbietao/article/details/78222917