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

转至元数据结

转至元数据起始

一、问题

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

二、解决办法

解决这个问题可以在input标签外嵌套form标签

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

问题解决了：

三、注意事项

如果<form></form>表单中只有一个<input type="text"/>，则使文本框获取焦点，并单击回车，form会自动提交。

    提交路径为action属性拼接到当前路径（action属性默认为空字符串，如果form没有action属性，则提交路径与当前路径相同）。

    浏览器表现：Chrome（桌布版、移动版）会出现此问题，Android手机会出现。Safari（桌面版、移动版）不会出现。

    解决方法：禁止表单提交。

    1  设置成<form οnsubmit="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();
    } 
});