Ext JS文本域达最大字符后禁止用户输入的实现问题

你遇到的情况是ExtJS默认的maxLength配置仅用于表单验证环节，不会直接阻止用户输入超出限制的内容。要实现达到300字符上限后完全禁止输入，可以通过以下两种方法解决：

方法一：启用enforceMaxLength配置（推荐） #

ExtJS的textareafield继承自Ext.form.field.Text，后者提供了enforceMaxLength配置项，默认值为false。将它设置为true后，组件会自动拦截所有超出maxLength限制的输入操作（包括键盘输入和粘贴），完美匹配你的需求。

修改后的配置代码如下：

{ 
    padding: '10 10 10 10', 
    colspan: 2, 
    flex: 1, 
    xtype: 'textareafield', 
    grow: true, 
    name: 'Text1', 
    fieldLabel: 'Text', 
    width: '90%', 
    anchor: '100%', 
    maxLength: 300, 
    enforceMaxLength: true, // 新增此配置
    disabled: true 
},

方法二：手动监听输入事件（兼容旧版ExtJS） #

如果你的ExtJS版本较旧，不支持enforceMaxLength，可以通过监听keypress和input事件来手动限制输入：

• keypress事件：实时拦截键盘输入，当当前内容长度达到上限时阻止输入
• input事件：处理粘贴等非键盘输入，若粘贴的内容超出上限，自动截断到300字符

示例代码：

{ 
    padding: '10 10 10 10', 
    colspan: 2, 
    flex: 1, 
    xtype: 'textareafield', 
    grow: true, 
    name: 'Text1', 
    fieldLabel: 'Text', 
    width: '90%', 
    anchor: '100%', 
    maxLength: 300, 
    disabled: true,
    listeners: {
        // 处理键盘输入
        keypress: function(field, e) {
            const currentLength = field.getValue().length;
            if (currentLength >= field.maxLength) {
                e.preventDefault(); // 阻止输入
            }
        },
        // 处理粘贴等非键盘输入
        input: function(field) {
            const value = field.getValue();
            if (value.length > field.maxLength) {
                field.setValue(value.substring(0, field.maxLength)); // 截断内容
            }
        }
    }
},

两种方法都能实现你想要的效果，优先推荐方法一，因为它是ExtJS官方提供的标准解决方案，代码更简洁且覆盖所有输入场景。

内容的提问来源于stack exchange，提问作者harunB10