代码之家 › 专栏 › 技术社区 › David

最大行数和每行最大字符数的文本区域

extjs6 extjs javascript

David · 技术社区 · 7 年前

textarea 其中行数必须为10,每行最多字符数为15。 一旦输入第16个字符,它就必须移到下一行。

而且我们不能输入超过10行。这就是我要做的。

Onchange侦听器。我正试图限制用户输入15个字符,但它没有发生。下面是我的代码。任何建议都会有帮助。

Ext.create('Ext.form.FormPanel', {
    title      : 'Sample TextArea',
    width      : 400,
    bodyPadding: 10,
    renderTo   : Ext.getBody(),
    items: [{
        xtype     : 'textareafield',
        grow      : true,
        name      : 'message',
        fieldLabel: 'Message',
        anchor    : '100%',
        listeners : {
            change : function(val,b){
                debugger;
                var text = val.getValue();
                var lines = text.split(/(\r\n|\n|\r)/gm); 
                 for (var i = 0; i < lines.length; i++) {
                    if (lines[i].length > 10) {
                        lines[i] = lines[i].substring(0, 10);
                    }
                }
                     text = lines.join('');
                //alert(val.value)
            }
        }
    }]
});

1 回复 | 直到 7 年前

GriffoGoes 7 年前

作为免责声明,这种类型的解决方案(在更改侦听器上)容易出现复杂的问题:有许多方法可以输入内容,例如将内容拖放到文本字段、复制/粘贴等。但这里有一个以某种方式起作用的解决方案,其中有一些注释:

Ext.create('Ext.form.FormPanel', {
    title      : 'Sample TextArea',
    width      : 400,
    bodyPadding: 10,
    renderTo   : Ext.getBody(),
    items: [{
        xtype     : 'textareafield',
        grow      : true,
        name      : 'message',
        fieldLabel: 'Message',
        anchor    : '100%',
        numLines : 15,
        numCharsPerLine: 10,
        listeners : {
            change : function(val,b){
                var text = val.getValue();
                //console.log(text);
                var lines = text.split(/\r\n|\n|\r/); 
                 for (var i = 0; i < lines.length; i++) {
                    if (lines[i].length > this.numCharsPerLine) {
                        lines[i] = lines[i].substring(0, this.numCharsPerLine);
                    }
                }
                if(lines.length < this.numLines && lines[lines.length-1].length == this.numCharsPerLine) lines[lines.length-1] += "\n" ;
                lines = lines.slice(0,this.numLines); // limit line number
                 text = lines.join('\n');
                 //console.log(text);
                 this.setRawValue(text)
                //alert(val.value)
            }
        }
    }]
});