使用 Javascript/jQuery 计算字符数

Question

我有以下代码：

.PHP

<input style="color:red;font-size:12pt;font-style:italic;" 
    readonly="" type="text" name="q22length" size="3" maxlength="3" value="50"/>
<textarea 
    onkeydown="textCounter(document.frmSurvey.q22,document.frmSurvey.q22length,50);mand();" 
    onkeyup="textCounter(document.frmSurvey.q22,document.frmSurvey.q22length,50)" 
    class="scanwid" name="q22" id="q22" rows="5" cols="">
</textarea>

杰西克

function textCounter(field,cntfield,maxlimit) {
    if (field.value.length > maxlimit) // if too long...trim it!
    field.value = field.value.substring(0, maxlimit);
    // otherwise, update 'characters left' counter
    else
    cntfield.value = maxlimit - field.value.length;
    }

JsFiddle： http://jsfiddle.net/Lh2UU/

代码应在"输入"选项卡中倒数数字，然后阻止用户添加超出设置限制的更多字符。 但是，它不起作用，我看不出为什么 - 有什么建议吗？

Answer 1

方法 1： jQuery

看到你已经标记了jQuery，我将给你一个jQuery解决方案：

$(function() {
    // Define our maximum length
    var maxLength = 50;
    // Our input event handler, which fires when the input changes
    $('textarea.scanwid').on('input', function() {
        // Pull the input text and its length
        var value = this.value,
            length = value.length;
        // Check if the length is greater than the maximum
        if (length > maxLength) {
            // If it is, strip everything after the maximum amount
            this.value = this.value.substring(0, maxLength);
            // Ensure our counter value displays 0 rather than -1
            length = maxLength;
        }
        // Update our counter value
        $('input[name="q22length"]').val(maxLength - length);
    });
});

JSFiddle demo.

---

方法 2：HTML 和 jQuery

还值得注意的是，我们可以将 maxlength 属性粘贴到我们的 textarea 元素上：

<textarea ... maxlength="50"></textarea>

然后，我们可以使用以下方法更新计数器：

$(function() {
    var maxLength = +$('textarea.scanwid').attr('maxlength');
    $('textarea.scanwid').on('input', function() {
        $('input[name="q22length"]').val(maxLength - this.value.length);
    });
});

第二个JSFiddle演示。