如何限制textarea中每行的字符数？

Question

我有一个 Ext JS TextArea。在那里，我想将我的字符限制为每行 15 个字符，并且总行数不应超过 10。

我想在这里做的是

function(){
    var myValue = this.getValue();
    var myValueData = myValue.split(/\r*\n/);
    myValueData.length = 10;    
}

理想情况下，它应该省略第 10 行之后的所有行，但不会发生。另外如何限制每行最多 15 个字符？

Answer 1

对于 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', '');
        }
    });
});

Answer 2

这可以通过使用更改监听器来实现。我创建了一个demo (fiddle)。请看小提琴，因为那里的代码很整洁并且也有 cmets。请在下面查看我的更改侦听器代码：

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

                        }
                    }

                }
            }

如果此答案解决了您的问题，请将此标记为答案，因为这也将在将来对其他人有所帮助。如果此答案有任何问题，请在 cmets 中告诉我。如果出现问题，我很抱歉，因为我不是 extjs 专家。但我还是试过了。

Answer 3

要限制 textarea 字符长度，您可以使用以下属性 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);

Answer 4

你可以试一试，虽然不完美，但应该可以。

也许使用更改侦听器会更好，覆盖组件上的 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');
                    }
                }
            }

Answer 5

这个问题非常适合正则表达式...

我的解决方案侧重于 "max char width" 和 "max line number" 要求，我认为这与 "max 不同char count"，因为要换行。由于此解决方案使用纯正则表达式，因此它最适合使用带有换行符 \n 的纯文本来换行而不是 html。

这个函数是幂等的，这意味着它的输出可以毫无问题地传送到它的输入。它也非常有效，因为它是纯正则表达式。这两个属性都非常适合放入 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;
};

此函数会将字符串格式化为给定的宽度/高度，但它以非常令人愉快的方式这样做：包装正则表达式考虑到现有的新行，这就是它是幂等的原因，并且会中断单词之间的线条不通过它们。有关 word wrap regex 的工作原理以及它为何如此强大的深入解释，请参阅我对使用 regex 在 JavaScript 中的 word wrapping strings 的回答：

Wrap Text In JavaScript

Answer 6

此解决方案使用纯 JavaScript。

基本思想是用.match(/.{1,10}/g)创建一个由15个字符组成的块数组，然后用换行符加入数组 join("\n")创建一个再次字符串。行数受到限制，仅使用 splice(10, chunks.length - 1) 删除剩余的块。

我们正在使用.onkeyup 事件，但可能是另一个事件，这是因为在我们释放一个键之前代码不会被触发。但是，如果我们将文本粘贴到 textarea 中，此代码也可以工作，因为该事件也会被触发。

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>

Answer 7

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

Ext JS 解决方案

很遗憾，SO 上的 sn-ps 不适用于 Ext JS。

因此，您可以在 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>

Answer 8

在您指定 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
}]

});