layx.iframe弹出框表单设置enter换行

最新推荐文章于 2024-05-18 09:45:18 发布

也就这么回事

最新推荐文章于 2024-05-18 09:45:18 发布

阅读量738

点赞数 2

分类专栏：前端表单文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43584556/article/details/106492938

版权

前端同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

表单

1 篇文章 0 订阅

订阅专栏

解决layx.iframe的表单enter提交问题

我们的目标是点击enter换行输入，而不是提交

前提：

在工作中碰到了一个小问题，就是在textarea中输入字符时，如果习惯性的点击到enter键，表单就会提交，这样很不合理，应当点enter的时候进行换行，点击下面的提交按钮才算一个完整的表单提交。

解决方案：1.防止enter表单提交；2.enter会进入到提交方法，在方法里面判断

当然，第一种是最常见的，也是最常用的。但是我的体验就很差，不知道是不是因为layx的原因，还是什么情况，各种方法都试了，均以失败告终。

1. 在body标签中，欺骗浏览器，让其以为是其他的按键

<body onkeydown=" alert(window.event.keyCode)">
<input id="demo" type="text" />
<input id="demo1" type="text" />
</body>

alert弹出13；绑定按键事件，再将按键的值给换了（enter对应的值为13，可换为其他值）

<body onkeydown="if(window.event.keyCode==13){ window.event.keyCode=9}">
<input id="demo" type="text" />
<input id="demo1" type="text" />
</body>

好，本以为我看到了希望，万万没想到，这个值根本没有改变，window.event.keyCode=9这句没有一点用，再次查看keyCode的值，仍然还是13，无语了；一顿百度，有人说是从ie9开始，就不能赋值了。半天时间浪费了，不在一条路死磕了，下一个方法。
2. 添加onkeydown事件进行判断

<form id="myForm"  method="post"  action="">
<input id="demo" type="text" />
<input id="demo1" type="text" />
<textarea type='text' name='name' onkeydown='if(event.keyCode==13) return false;'></textarea>
</form>

事实证明还是我不懂，又是一点用没有，我看有人说加在上面

<form id="myForm" onkeydown='if(event.keyCode==13) return false;'  method="post"  action="">
<input id="demo" type="text" />
<input id="demo1" type="text" />
<textarea type='text' name='name'></textarea>
</form>

好的，依旧不能用，我准备换下一种方法，只要我换的够多，总能蒙对一个。
3.书写一个全局禁用的方法

$(document).ready(function(){
     function document.onkeydown() {
        var e = event.srcElement;
        if (event.keyCode == 13) {
            return false;
        }
	}
});

额，想法很暴力，但是换行怎么办，而且点击enter的时候，还是会进入提交的方法。。。告辞
4.在提交方法里面判断是否为enter提交
既然你一直想提交，我不妨在你提交的时候，先判断你是不是键盘事件，这样我直接返回，就等于enter失效了。我把我页面的整体流程贴出来。
下面是一个新增的方法，使用layx.iframe弹出框，弹出一个表单页面

function add() {
        layx.iframe('localsite-frame', null, '${pageContext.request.contextPath}/org/group-detail.do', {
            width: '70%',
            height: '90%',
            shadable: 0.3,
            statusBar: true,
            buttons: [
                {
                    label: '保存',
                    callback: function (id, button, event) {
                        // 获取 iframe 页面 window对象
                        var contentWindow = layx.getFrameContext(id);
                        contentWindow.addGroup(window.event);
                        //layx.destroy(id);
                    }
                },
                {
                    label: '关闭',
                    callback: function (id, button, event) {
                        refresh();
                        layx.destroy(id);
                    },
                    classes: "icon-close"
                }
            ],
            event: {
                // 关闭事件
                ondestroy: {
                    // 关闭之前，return false 不执行，inside 区分用户点击内置关闭按钮还是自动调用，用户关闭之前传递的参数，escKey表示是否是按下esc触发
                    before: function (layxWindow, winform, params, inside, escKey) {
                        refresh();
                    },
                    // 关闭之后
                    after: function () {
                    }
                }
            }
        });
    }

这是点击新增组弹出来的框；
在这里插入图片描述
好的，注意了，这里contentWindow.addGroup(window.event); addGroup是一个保存方法，传入window.event，是为了监听到是点击事件，还是keyCode事件。
然后在提交的方法中直接进行判断

function addGroup(e) {
		console.log(e);
        if(e.keyCode==13){
            return;
        }
    }

在这里插入图片描述
果然，两个的事件不一样，第一个是我使用enter键，里面的keyCode就是13，我们判断如果e.keyCode==13那么直接return，这样就成功的解决了layx.iframe的enter提交问题，轻轻松松的换行了！！！
本以为很简单的一个小事情，结果花费了我两个小时的事件，前端小白，对于这些比较懵，如果哪位大哥有更好的方法，欢迎指点指点我，虽然我觉得我这样处理不合适，但是没得办法了呀，先实现功能吧！

也就这么回事

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
layx.iframe弹出框表单设置enter换行

解决layx.iframe的表单enter提交问题我们的目标是点击enter换行输入，而不是提交前提：在工作中碰到了一个小问题，就是在textarea中输入字符时，如果习惯性的点击到enter键，表单就会提交，这样很不合理，应当点enter的时候进行换行，点击下面的提交按钮才算一个完整的表单提交。解决方案：1.防止enter表单提交；2.enter会进入到提交方法，在方法里面判断当然，第一种是最常见的，也是最常用的。但是我的体验就很差，不知道是不是因为layx的原因，还是什么情况，各种方法都试.
复制链接

扫一扫

专栏目录