文本区域JavaScript中的字符限制-特殊情况

Character Limit In Text Area JavaScript - Special Case

本文关键字：情况 字符 区域 JavaScript 文本      更新时间：2023-09-26

我有一个阻止程序，我必须限制用户在自定义文本区域标记中输入超过限制的字符。在我们的应用程序中，我们将ENTER计数为5个字符，将任何其他特殊字符计数为5字符

以下是我迄今为止尝试的内容：

    function maxLengthVal(ele,length){
        var textSize = ele.value.length;
        if(textSize >= length){
            ele.value = ele.value.substring(0, length);
        }           
    }

这是我在onKeyup和Onkeydown上调用的函数。目前，它只计算字符数，但不将ENTER或SPECIAL characters视为5个字符。

我需要一个类似的，但里面有5个字符的解析。我一直在思考如何处理它。如果有人能帮忙，那就太好了。

function maxLengthVal(ele,length) {
    var textSize = length_SPECIAL(value);
    if (textSize >= length) {
        ele.value = ele.value.substring(0, length);
    }           
}

其中length_SPECIAL为：

function length_SPECIAL(str) {
    function is_SPECIAL(charCode) {
        switch(charCode) {
            case 13: case 9: /* etc... */
                return true;
        }
         return false;
    }
    var cnt = 0;
    for (var i = str.length - 1; i >= 0; i -= 1) {
        cnt += (is_SPECIAL(str.charCodeAt(i)) ? 5 : 1);
    }
    return cnt;
}

给定HTML:

<form action="#" method="post">
    <fieldset>
        <textarea id="demo"></textarea>
        <span class="count"></span>
    </fieldset>
</form>

我建议：

function characterCount() {
    // caching the relevant element (passed in
    // automagically from addEventListener()):
    var self = this,
        // finding the element in which the count
        // should be displayed:
        output = self.parentNode.querySelector('.count'),
        // the value of the <textarea>:
        val = self.value,
        // a simple regular expression that matches all
        // non-word characters (equivalent to: [^A-Za-z0-9_],
        // so not A-z, a-z, 0-9 or underscore); this should
        // be replaced by whatever list of characters you
        // consider 'special':
        reg = /'W/g,
        // removing all the 'special' characters, by
        // replacing them with empty strings, and getting
        // the length of that non-special characters string:
        normalCount = val.replace(reg, '').length,
        // finding all the 'special' characters:
        specials = val.match(/'W/g),
        // if there were some 'special' characters found 
        // (String.match() returns null if there are no
        // matches found, or an array if matches are found)
        // we get the length of that array of matches, or
        // zero (to ensure a numerical value):
        specialCount = specials ? specials.length : 0;
    // setting the textContent to the result of normalCount
    // plus the number of 'special' characters multiplied
    // by 5:
    output.textContent = normalCount + (specialCount * 5);
}
// getting the textarea (via its id):
var textarea = document.querySelector('#demo');
// binding the characterCount function
// as the keyup event-handler:
textarea.addEventListener('keyup', characterCount);


function characterCount() {
  var self = this,
    output = self.parentNode.querySelector('.count'),
    val = self.value,
    reg = /'W/g,
    normalCount = val.replace(reg, '').length,
    specials = val.match(/'W/g),
    specialCount = specials ? specials.length : 0;
  output.textContent = normalCount + (specialCount * 5);
}
var textarea = document.querySelector('#demo');
textarea.addEventListener('keyup', characterCount);
<form action="#" method="post">
  <fieldset>
    <textarea id="demo"></textarea>
    <span class="count"></span>
  </fieldset>
</form>

JS Fiddle演示。

参考文献：

  • CCD_ 2
  • EventTarget.addEventListener()
  • JavaScript正则表达式指南
  • Node.parentNode
  • Node.textContent
  • String.prototype.match()
  • String.prototype.replace()
相关文章：