美文网首页
【完全解决】取消回车自动提交表单

【完全解决】取消回车自动提交表单

作者: 痴者无心 | 来源:发表于2018-07-20 10:43 被阅读0次

    情景一:

    form 中没有需要输入Enter键的控件,如没有textarea

    方法一: 在 form 标签上添加 'onkeypress'

    <form ... onkeypress="return event.keyCode != 13;">
    

    方法二: 通过 JQuery 用代码统一处理

    $(document).on("keypress", "form", function(event) { 
        return event.keyCode != 13;
    });
    

    情况二:

    form 中有 textarea,需要输入Enter 键,且此Enter键不造成Form的自动提交

    方法一: 笨办法 - 适用于控件不多的场景,每一个控件上单独添加屏蔽Enter键的输入,如:

    <input ... onkeypress="return event.keyCode != 13;">
    <select ... onkeypress="return event.keyCode != 13;">
    ...
    

    方法二: 用代码的方式来批量屏蔽,如下:

    $(document).on("keypress", ":input:not(textarea)", function(event) {
        return event.keyCode != 13;
    });
    

    方法三: 方法二的改良版,增加了对个别控件需要单独使用Enter键做其他操作的个别需求,可以使用如下方法:

    $(document).on("keypress", ":input:not(textarea)", function(event) {
        if (event.keyCode == 13) {
            event.preventDefault();
        }
    });
    

    方法四:针对性屏蔽,比如仅开启 textarea 和 submit 按钮的Enter, 如下:

    $(document).on("keypress", ":input:not(textarea):not([type=submit])", function(event) {
        // ...
    });
    

    摘录自: Stack Overflow 站点 原文链接

    相关文章

      网友评论

          本文标题:【完全解决】取消回车自动提交表单

          本文链接:https://www.haomeiwen.com/subject/busfmftx.html