如何限制文本区域中每行的字符数?

你可以试一试,但不是完美的,但应该有效。

也许更好的方法是使用变更监听器,覆盖组件上的setvalue或setrawvalue函数。

https://fiddle.sencha.com/#view/editor&fiddle/2js1

   {
                xtype: 'textareafield',
                grow: true,
                name: 'message',
                fieldLabel: 'Message',
                anchor: '100%',
                listeners: {
                    change: function (cmp, newVal, oldVal) {
                        var arrayForEachLine = newVal.split(/\r\n|\r|\n/g);
                        var newVal = [];
                        Ext.Array.each(arrayForEachLine, function (line, index) {
                            if (line.length >= 10) {
                                offset = line;
                                while (offset.length > 0) {
                                    newVal.push(offset.substring(0, 10));
                                    offset = offset.substring(10);
                                }

                            } else {
                                newVal.push(line);
                            }
                            if (index === 10) return false;
                            if (newVal.length >= 10) {
                                newVal = newVal.slice(0, 10);
                                return false;
                            }
                        });
                        cmp.suspendEvent('change');
                        cmp.setValue(newVal.join('\n'));
                        cmp.resumeEvent('change');
                    }
                }
            }

这可以通过使用变更监听器来实现。我创造了一个 demo (fiddle) 。请看小提琴,因为代码很整洁,也有注释。请看下面我的变更监听器代码:

listeners: {
                change: function () { 
                    var myValue = Ext.getCmp('myField').getValue(); 
                    var lines = myValue.split("\n"); 
                    if (lines.length > 10) { 
                        alert("You've exceeded the 10 line limit!"); 
                        Ext.getCmp('myField').setValue(textAreaValue); 
                    } else { //if num of lines <= 10
                        for (var i = 0; i < lines.length; i++) { /
                            if (lines[i].length > 15) { /
                                alert("Length exceeded in line " + (i+1)); 
                                Ext.getCmp('myField').setValue(textAreaValue); 
                            } else if (lines[i].length <= 15 && i == lines.length - 1) { 
                                textAreaValue = myValue; 
                            }

                        }
                    }

                }
            }

如果这个答案解决了你的问题,请把这个标记为答案,因为这也将在将来帮助其他人。如果这个答案有什么问题,请在评论中告诉我。如果有什么问题,我很抱歉,因为我不是ExtJS专家。但我还是尽力了。

要限制文本区域字符长度,可以使用以下属性maxlength。

<textarea maxlength="50">

截断一个字符串或数字。

text_truncate = function(str, length, ending) {
if (length == null) {
  length = 100;
}
if (ending == null) {
  ending = '...';
}
if (str.length > length) {
  return str.substring(0, length - ending.length) + ending;
} else {
  return str;
}
};

你可以打电话给它

text_truncate(yourContentToTruncate,15);

此问题适用于regex…

我的解决方案集中在 “最大字符宽度” 和 “最大行号” 我认为与之不同的要求 “最大字符数” 因为文字的包装。因为这个解决方案使用纯regex,所以它最适合使用换行符的纯文本。 \n 换行而不是HTML。

这个函数是等幂的,这意味着它的输出可以通过管道传输到它的输入中而不产生问题。它也是非常有效的,因为它是纯regex。这两个属性都使它成为 onchange 处理程序可以在每次按键时更新文本,而不会造成较大的性能损失。

const fit = (str, w = 80, h = 24) => {
    w = new RegExp(`(?![^\\n]{1,${w}}$)([^\\n]{1,${w}})\\s`, 'g');
    str = str.replace(w, '$1\n');
    h = new RegExp(`(((^|\\n)[^\\n]*){${h}})((($|\\n)[^\\n]*)+)`);
    str = str.replace(h, '$1');
    return str;
};

此函数将字符串格式化为给定的宽度/高度,但它在 惬意的 方式:包装regex考虑了现有的新行,这就是为什么它是等幂的,并打破单词之间的行,而不是通过它们。有关自动换行regex是如何工作的以及为什么它是健壮的,请参阅我关于用regex在javascript中自动换行字符串的答案:

Wrap Text In JavaScript

此解决方案使用纯JavaScript。

基本思想是 创建由15个字符组成的块数组 具有 .match(/.{1,10}/g) 然后, 用换行符连接数组 join("\n") 再次创建字符串。行数受到限制,只需使用 splice(10, chunks.length - 1) .

我们正在使用 .onkeyup 事件,但可能是另一个事件,这是因为在我们释放一个键之前代码不会被激发。但是,如果我们将文本粘贴到文本区域内,这段代码也会起作用,因为事件也会被激发。

document.getElementById("textArea").onkeyup = function() {

  var text = this.value.replace("\n", "");

  if (text.length > 15) {

    var chunks = text.match(/.{1,15}/g);

    if (chunks.length > 10) { 

      chunks.splice(10, chunks.length - 1);

      alert("if text have more than 10 lines is removed");
    }

    this.value = chunks.join("\n");

  }
};

<textarea rows="18" cols="50" id="textArea">
</textarea>

在指定文本区域字段的位置,需要将“enforceMaxLength”属性设置为true,然后将“maxLength”属性设置为字符数作为限制。请找到以下extjs的示例代码。在这个例子中,我设置了不超过10个字符的限制。希望这有帮助。

Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
    xtype: 'textarea',
    name: 'name',
    fieldLabel: 'Name',
    enforceMaxLength:true,
    maxLength:10,
    allowBlank: false  // requires a non-empty value
}]

(});

对于10行接受条件

$(document).ready(function(){

    var lines = 10;
    var linesUsed = $('#linesUsed');

    $('#countMe').keydown(function(e) {

        newLines = $(this).val().split("\n").length;
        linesUsed.text(newLines);

        if(e.keyCode == 13 && newLines >= lines) {
            linesUsed.css('color', 'red');
            return false;
        }
        else {
            linesUsed.css('color', '');
        }
    });
});

我已经编写了将剪切字符放在下一行开头的解决方案。只允许10行,每行15个字符。

带Ext JS的解决方案

不幸的是,上面的代码片段不适用于ExtJS。

因此你可以看到 this codepen.io link .

Ext.application(
{
    name: 'ExtApp',
    launch: function ()
    {
        Ext.create('Ext.form.Panel',
        {
            title: 'Sample TextArea',
            bodyPadding: 10,
            renderTo: Ext.getBody(),
            title: 'Restricted number of characters per line in textarea',
            height: 500,
            width: 700,
            items:
            [{
                xtype: 'textareafield',
                grow: true,
                fieldLabel: 'Please write your text:',
                height: 320,
                width: 480,
                listeners:
                {
                    change: function(self, newVal)
                    {
                        var chunks = newVal.split(/\r*\n/g),
                            lastLineCutedTxt = '';

                        for(var i = 0; i < chunks.length; i++)
                        {
                            chunks[i] = lastLineCutedTxt + chunks[i];

                            if(chunks[i].length > 15)
                            {
                                lastLineCutedTxt = chunks[i].slice(15);
                                chunks[i] = chunks[i].slice(0, 15);
                            }
                            else lastLineCutedTxt = '';
                        }

                        if(lastLineCutedTxt != '')
                            chunks.push(lastLineCutedTxt);

                        self.suspendEvent('change');
                        self.setValue(chunks.slice(0, 10).join('\n'));
                        self.resumeEvent('change');
                    }
                }
            }]
        });
    }
});

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-triton/resources/theme-triton-all.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-triton/theme-triton.js"></script>

纯javascript解决方案

var txtArea = document.getElementById('txt-area')
txtArea.onkeyup = function(e)
{
    var chunks = this.value.split(/\r*\n/g),
        lastLineCutedTxt = '';

    for(var i = 0; i < chunks.length; i++)
    {
        chunks[i] = lastLineCutedTxt + chunks[i];

        if(chunks[i].length > 15)
        {
            lastLineCutedTxt = chunks[i].slice(15);
            chunks[i] = chunks[i].slice(0, 15);
        }
        else lastLineCutedTxt = '';
    }

    if(lastLineCutedTxt != '')
        chunks.push(lastLineCutedTxt);

    this.value = chunks.slice(0, 10).join('\n');

};

<textarea id="txt-area" rows="16" cols="35"></textarea>