0

我有一个脚本应该限制没有。在文本框或文本区域中输入的字符数。我知道我可以使用 maxlength 属性来做到这一点。但我想使用JS实现。

下面是小提琴：

http://jsfiddle.net/xTrKD/

代码：

$(function() {
function limitText(limitField, limitNum) 
    { 
        if (limitField.value.length > limitNum)
            { 
                limitField.value = limitField.value.substring(0, limitNum);
                }
        }

})​

HTML：

<input type="text" id="sessionNo" name="sessionNum" onKeyUp="limitText(this,5);" />
4

6 回答 6

5

首先，工作小提琴：http: //jsfiddle.net/Ralt/xTrKD/2/

您有 2 个错误：

  • 该limitText函数是在函数中定义的$(function(){})，因此在函数之外不可用。（例如，在 HTML 中。）
  • 小提琴配置错误。请参阅左侧的选项。

顺便说一句，将 javascript 放在 HTML 中是个坏主意。您将内容与行为混合在一起。您最好使用这种解决方案将您的关注点分开：

$(function() {
    $('input').on('keyup', function() {
        limitText(this, 5);
    });

    function limitText(limitField, limitNum) {
        if (limitField.value.length > limitNum) {
            limitField.value = limitField.value.substring(0, limitNum);
        }
    }
});
于 2012-12-21T12:55:12.730 回答
2

工作小提琴示例。

你真的不需要很多代码：

function limitText(limitField, limitNum) {
    if([8, 37,38,39,40, 46].indexOf(event.which) == -1) // If the currently pressed key is not the backspace(8), arrow keys(37-40), or delete(46);
    return limitField.value.length < limitNum;          // Check the input field's length.
}

请记住，我在您的 html 中添加了 a语句return，input并将.onKeyUponKeyDown

返回false到 aonKeyDown可防止输入字符。这样做的好处是，在被删除之前，您不会让输入的字符闪烁片刻。

是一个例外，if以确保backspace(8)、arrow keys(37-40)和delete(46)键仍然有效。

带有数字的数组是键的键码。如果当前按下的键 ( event.which) 不是其中之一，则indexOf()返回 -1，因此该函数可以检查长度。

于 2012-12-21T12:58:03.190 回答
1

进一步从我上面的评论

http://jsfiddle.net/xTrKD/1/

$(function () {
    $('input').on('keyup', function (e) {
        limitText(this, 5);
    });

    function limitText(limitField, limitNum) {
        if (limitField.value.length > limitNum) {
            limitField.value = limitField.value.substring(0, limitNum);
        }
    }
})​;
于 2012-12-21T12:54:40.427 回答
1

您没有暴露limitText于全局命名空间。尝试将其分配给window.limitText，以便您的事件处理程序可以找到它。或者，使用 jQuery 从闭包中将其绑定到 keyup。

于 2012-12-21T12:56:24.063 回答
0

另一个解决方案：

<input type="text" id="sessionNo" name="sessionNum" myMaxLength="5" />​​​​​​​​​​​​​​​​​​​​​​​​​​​

$('#sessionNo').on('keypress', function(e) {
    if ($(this).val().length >= $(this).attr('myMaxLength'))
        return false;
});
​
于 2012-12-21T13:21:46.447 回答
0

工作小提琴（没有 jQuery 和头部代码）http://jsfiddle.net/xTrKD/7/

输入：

<input type="text" id="sessionNo" name="sessionNum" onKeyDown="limitText(this,5);" />​

Javascript：

function limitText(limitField, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } 
}​
于 2012-12-21T12:58:54.937 回答