始终为button按钮添加type属性
若button按钮没有type属性,浏览器默认按照type=submit逻辑处理,这样若将没有type的button放在form表单中,点击按钮就会执行form表单提交,页面就会刷新,用户体验极差。
这是官方文档中的一段文字,来自 http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/122
之前一直没有去怀疑过,所以我们写的代码是这样的:
document.getElementById("J_submit").addEventListener('tap', login, false);
document.querySelector("input").addEventListener('keydown', function(){
if(event.keyCode == 13){
// 收回弹出的软键盘
document.activeElement.blur();
login();
}
}, false);
function login(){
// 收回弹出的软键盘
document.activeElement.blur();
...
}
界面是这样的:
甚至官方造了一个 mui.enterfocus.js,来绑定input的enter事件。
可是,那并不十全十美,第三方输入法的软键盘,按return有时候是不起作用的,撒逼了吧:)
其实,你真的可以为type加submit,来改进那糟糕的用户体验,而且,代码更简单,是的!
<form action="">
<input type="text" name="username">
<button type="submit" class="mui-btn mui-btn-block">保 存</button>
</form>
// 绑定form表单提交事件
document.querySelector('form').addEventListener('submit', function(e){
e.preventDefault(); // 阻止默认事件
login();
});
唯一要求是你需要把input和button放到action=""的form表单中。
然后,你就拥有一个Go的软键盘了,且在任意输入框中按回车均可响应。就像下面这样:
enjoy:)
你以为你只有Go?你错了,其实你也有了Search。