Question

我有一个拦截器，我必须限制用户在自定义文本区域标签中输入超过限制的字符。在我们的应用程序中，我们将 ENTER视为5个字符以及任何其他 SPECIAL CHARACTERS计为5个字符。一旦达到限制，我们就会阻止用户输入任何更多的字符，而不会发出任何警报。

这是我到目前为止所尝试的内容：

    function maxLengthVal(ele,length){
        var textSize = ele.value.length;

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

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

我需要一个类似的，但解析它的5个字符。我被困在如何接近它。如果有人可以帮助那将是伟大的。

Answer 1

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

Answer 2

鉴于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 demo

参考文献：

document.querySelector()。
EventTarget.addEventListener()。
Guide to JavaScript regular expressions。
Node.parentNode。
Node.textContent。
String.prototype.match()。
String.prototype.replace()。

文本区JavaScript中的字符限制 - 特例

2 个答案: