Question

我正在尝试为具有以下格式的多个字段的表单实现泛型函数。

<label id="LblTextCount"></label>
<textarea name="text" onKeyPress="checkLength(this, 512, LblTextCount)">
</textarea>

以下JavaScript：

function checkLength(object, maxlength, label) {
    charsleft = (maxlength - object.value.length);

    // never allow to exceed the specified limit
    if( charsleft < 0 ) {
        object.value = object.value.substring(0, maxlength-1);
    }

    // I'm trying to set the value of charsleft into the label
label.innerText = charsleft;
    document.getElementById('LblTextCount').InnerHTML = charsleft;
}

第一部分工作正常，但我无法将charsleft值设置为标签。我究竟做错了什么？请注意，我正在寻找一种动态方法，而不是将标签名称硬编码到JS函数中。 JQuery也可以。）

<小时/> 解决方案 - 感谢所有人！

HTML

<label id="LblTextCount"></label>
<textarea name="text">
</textarea>

JS

$(document).ready(function() {
    $('textarea[name=text]').keypress(function(e) {
        checkLength($(this),512,$('#LblTextCount'));
    }).focus(function() {
        checkLength($(this),512,$('#LblTextCount'));
    });
});

function checkLength(obj, maxlength, label) {
    var charsleft = (maxlength - obj.val().length);

    // never allow to exceed the specified limit
    if( charsleft < 0 ) {
        obj.val(obj.val().substring(0, maxlength-1));
    }

    // set the value of charsleft into the label
    $(label).html(charsleft);
}

Answer 1

InnerHTML应该是innerHTML：

document.getElementById('LblAboutMeCount').innerHTML = charsleft;

您应该使用jQuery将checkLength函数绑定到textarea，而不是内联而非侵入地调用它：

$(document).ready(function() {
    $('textarea[name=text]').keypress(function(e) {
        checkLength($(this),512,$('#LblTextCount'));
    }).focus(function() {
        checkLength($(this),512,$('#LblTextCount'));
    });
});

你可以通过使用更多的jQuery来结束checkLength，我不会使用'object'作为形式参数：

function checkLength(obj, maxlength, label) {
    charsleft = (maxlength - obj.val().length);
    // never allow to exceed the specified limit
    if( charsleft < 0 ) {
        obj.val(obj.val().substring(0, maxlength-1));
    }
    // I'm trying to set the value of charsleft into the label
    label.text(charsleft);
    $('#LblAboutMeCount').html(charsleft);
}

因此，如果您应用上述内容，则可以将标记更改为：

<textarea name="text"></textarea>

Answer 2

你做错了几件事。解释遵循更正后的代码：

<label id="LblTextCount"></label>
<textarea name="text" onKeyPress="checkLength(this, 512, 'LblTextCount')">
</textarea>

请注意id周围的引号。

function checkLength(object, maxlength, label) {
    charsleft = (maxlength - object.value.length);

    // never allow to exceed the specified limit
    if( charsleft < 0 ) {
        object.value = object.value.substring(0, maxlength-1);
    }

    // set the value of charsleft into the label
    document.getElementById(label).innerHTML = charsleft;
}

首先，在您的按键事件上，您需要将标签ID作为字符串发送，以便正确读取。其次，InnerHTML有一个小写的i。最后，因为你发送了函数字符串id，你可以通过该id获取元素。

让我知道这对您有何影响

编辑并非如果不将charsleft声明为var，则隐式创建全局变量。在函数中声明它时，更好的方法是执行以下操作：

var charsleft = ....

Answer 3

对于动态方法，如果您的标签始终位于文本区域前面：

$(object).prev("label").text(charsleft);

Javascript：设置标签文本

3 个答案: