具有最多行數和每行最多字符的Textarea

Question

我遇到一個需要開發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)
            }
        }
    }]
});

在這里，我要求每行的字符數和行數是文本區域。

Answer 1

作為免責聲明，這種類型的解決方案（針對更改偵聽器）容易出現復雜的問題：輸入內容的方法有很多，例如將內容拖放到文本字段，復制/粘貼等。有一些評論的工作解決方案：

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