蔡繁荣
蔡繁荣
  • 发布:2015-12-23 20:22
  • 更新:2018-12-11 15:21
  • 阅读:12986

【分享】是时候为button按钮添加submit属性了

分类:MUI

始终为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。

8 关注 分享
BoredApe DCDDD 温柔如斯 Trust 寄生熊 ccfto amourz i***@163.com

要回复文章请先登录注册

王彦坡

王彦坡

mark
2016-06-11 00:33
寄生熊

寄生熊

非常感谢
2016-06-03 14:40
小苏

小苏

mark
2016-04-13 16:21
春华秋实

春华秋实

enter我这里测试不管用啊
2016-03-02 15:58
蔡繁荣

蔡繁荣 (作者)

回复 铧铧 :
type="search"为search, next好像没办法
2015-12-28 10:10
铧铧

铧铧

请问下,怎么把go改为search或者next?
2015-12-28 09:29
蔡繁荣

蔡繁荣 (作者)

回复 maq :
哈哈,谢谢支持
2015-12-23 21:46
maq

maq

好文须顶!如果措辞能再文雅一点就完美了 ^_^
2015-12-23 21:39