Текстовое поле с максимальным количеством строк и максимальным количеством символов в строке - PullRequest
Новая
       13

Текстовое поле с максимальным количеством строк и максимальным количеством символов в строке

0 голосов
/ 02 октября 2018

Я сталкиваюсь с одной проблемой, где мне нужно разработать 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 Ответ

0 голосов
/ 02 октября 2018

Как отказ от ответственности, решения этого типа (для слушателей изменений) подвержены сложным проблемам: существует много способов ввода содержимого, например перетаскивания в текстовое поле, копирования / вставки и т. Д. Но здесьявляется каким-то рабочим решением с некоторыми комментариями: 

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