input 阻止表单输入框的回车键触发提交事件

背景：

项目涉及到的技术有：layui+jquery。

问题描述：input输入框，当键盘敲击回车键，会触发表单form的submit提交事件。

解决思路：排除法

1.表单form的提交事件，它是layui表单的写法，例如：form.on('submit(myLableAdd_submit)', function (data) {})

然后经过排除法，不是。

2.原因可能是因为点击按钮后，焦点还在该按钮上，此时在按下enter键，相当于再次点击该按钮，所以会触发。

然后经过排除法，不是。

3.组织输入框的回车提交。是解决办法

//阻止输入框回车提交

        $("addMylable input").keydown(function (event) {

            if (event.keyCode == 13) {

                return false;

            }

        })

一、解决方式1： 

首先看layui按钮的静态布局，了解<Button>按钮的各种属性，通过layui组件官网；

再看form表单的触发的提交事件的条件；

然后阻止回车键触发

官网相关的理论知识： 

form表单提交事件的事件，如下：点击跳转

form.on('submit(myLableAdd_submit)', function (data) {}）

实际代码：

 1.按钮布局：

此时我们声明了这个一个submit按钮，绑定了lay-submit + lay-filter属性

 表单提交事件：

2.提交事件的代码：

封装方法：

        /**
         * 表单提交-添加
         */
        form.on('submit(myLableAdd_submit)', function (data) {
            debugger
            var field = data.field;
            var img = "";
            $("#imgList img").each(function () {
                var _this = $(this);
                var name = _this.attr('name');
                if(name){
                    img += name + ',';
                }
                return false;
            })
            if (field.names == null || field.names == undefined || field.names == "") {
                layer.msg("请填写标注名称", {
                    icon: 5,
                    time: 2000
                });
                return false;
            }else{
                // const regex = /[\s~`!@#$%^&*()\-_=+[\]{}|;:'",<.>/?]/;
                const regex = new RegExp("[`%~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]");
                const result = regex.test(field.names);
                if(result){
                    layer.msg("标题名称不能包含特殊字符，请检查", {
                        icon: 2,
                        time: 2000
                    });
                    return false;
                }
            }
            $.post("enavapi/enav/appTemplabel/save",{param:JSON.stringify(field)},function(res){
                if (res.code == 200) {
                    layer.msg(res.msg || "添加成功", {
                    icon: 1,
                    time: 2000
                    });
                    myLable.initTb()
                    layer.close(MAPutils.addMyLableLUIBox)
                }else {
                    layer.msg(res.msg || "添加失败", {
                    icon: 5,
                    time: 2000
                    });
                }
            })
            
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可
        })

总结： 

写在最后，已经按照官网给出的实例代码，通过lay-submit设置了表单提交触发的按钮，以及给按钮通过lay-filter添加了过滤器 。

但回车键还是会触发，那么就不是表单form.on()上的监听事件引起的

二、解决方式2：

思路：

layui.open()打开的弹框，在success:{}函数对象内，去除焦点。

代码：$(':focus').blur();

核心代码：

            layer.open({
                type: 2
                , content: 'xxx'
                , title: '新建'
                , area: ['80%', '90%']
                , shade: 0.6
                , skin: "layui-layer-molv"
                , maxmin: false
                ,success:function () {
                    $(':focus').blur();
                }
            });

总结： 

写在最后，能够去除焦点，但是还是会触发提交事件 

 三、解决方式3

思路：

阻止输入框的回车提交。解决了。

核心代码：

        //阻止输入框回车提交
        $("addMylable input").keydown(function (event) {
            if (event.keyCode == 13) {
                return false;
            }
        })