一、问题
设计搜索框时如果,单单使用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();
}
});