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

版本

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;
    }
}

html form panel 浏览器 源码

0 人点赞