前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >EXTJS防止表单中回车触发提交

EXTJS防止表单中回车触发提交

作者头像
路过君
发布2020-08-24 10:55:22
1.4K0
发布2020-08-24 10:55:22
举报
文章被收录于专栏:路过君BLOG from CSDN

版本

7.0 modern toolkit

现象

在formpanel下的字段中使用回车时会自动触发form标签提交,导致跳转

源码

  • Ext.form.Panel
代码语言:javascript
复制
getTemplate: function() {
    var template = this.callParent();

    // 为实现标准的表单提交,加入了一个隐藏的input标签,类型为submit
    // 浏览器检查到此form字段回车会自动触发submit对象的click事件提交
    template.push({
        tag: 'input',
        type: 'submit',
        cls: Ext.baseCSSPrefix + 'hidden-submit'
    });

    return template;
},
initialize: function() {
  this.callParent();
  	// 此处对form元素增加监听submit事件
  	// 但是实际设置formpanel.standardSubmit=true, 表单字段回车并不会触发此事件,而是通过onFieldAction触发提交
    this.element.on('submit', 'onSubmit', this);
},

生成的html为

在这里插入图片描述
在这里插入图片描述

浏览器会自动响应表单字段回车事件并触发表单提交。

解决

代码语言:javascript
复制
Ext.define('common.overrides.Ext.form.Panel', {
    override: 'Ext.form.Panel',
    getTemplate: function() {
        var template = this.callParent();
        // 删除submit对象
        template.pop();
        return template;
    }
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/08/20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 版本
  • 现象
  • 源码
  • 解决
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档