ExtJS中的maxLength

最新推荐文章于 2025-09-04 16:04:47 发布

原创

最新推荐文章于 2025-09-04 16:04:47 发布 · 1.7w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#maxLength #ExtJS

本文探讨了ExtJS中的maxLength属性在处理文本输入时的一个常见问题，特别是在处理UTF-8编码的生僻字时。虽然maxLength通常能有效限制英文和普通中文字符的输入长度，但遇到4字节的生僻字，实际输入限制会变成设定值的一半。此问题已报告给Sencha Forum，并提醒开发者在使用ExtJS时需注意这一潜在的bug。

时至今日，ExtJS已然不再流行，基本上已经从前端的世界销声匿迹了。但不可否认的是它依然在诸多legacy代码中发挥着重要作用，一旦有了问题，同样让人难受。今天我们就来聊一个还算是一个比较常见的（至少对我来说如此）国际化问题吧，它起源于maxLength。

首先我们来创建一个textfield，相信在所有控件中，它的出现率应该当仁不让。随后对其maxLength进行限制，这里为了显示效果，设置成较小的数字4。

Ext.onReady(function() {
    Ext.widget('form', {
        title: 'Test Form',
        width: 300,
        bodyPadding: 10,
        renderTo: Ext.getBody(),
        items: [
            {
                xtype: 'textfield',
                name: 'Name',
                fieldLabel: 'Name',
                maxLength: 4,
                enforceMaxLength: true
            }
        ],
    });
});

就这么简单的完成了，让我们来启动它。既然我们已经做了限制，那么期望最大输入字符数一定是4喽，是否如此？快来试试吧。

用例1

输入abcdef，果然只显示abcd

用例2

输入利物浦是冠军，显示利物浦是，冠军果然没了

用例3

输入