Question

JSFiddle https://jsfiddle.net/8xo98vzk/9/

我有多个TextAreas，我需要使用自定义MaxLength参数为它们定义一个常见的On-Max事件。我的策略是建立一个对ID-> MaxLength的地图。但有些东西不起作用。这是正确的做法吗？

HTML

<input type="textarea" id="textarea1" /><br/>
<input type="textarea" id="textarea2" /><br/>
<input type="textarea" id="textarea3" /><br/>
<input type="textarea" id="textarea4" /><br/>

的jQuery

var maxlengthmap = {};
maxlengthmap['textarea1'] = 5;
maxlengthmap['textarea2'] = 3;
maxlengthmap['textarea3'] = 7;
maxlengthmap['textarea2'] = 1;


$('input[type=textarea]').each(function () {
    $(this).keyUp(function() {
    if ($(this).val().length > maxlengthmap[$(this).id]) {
        alert('Exceeded');
    }
  });

});

Answer 1

你的主要问题在于这一行：

if ($(this).value.length > maxlengthmap[$(this).id]) {

将其更改为：

if ($(this).value().length > maxlengthmap[$(this).id]) {

或者，在普通的js：

if (this.value.length > maxlengthmap[this.id]) {

此外，您不需要 .each ，您可以简单地写一下：

$('input[type=textarea]').on('keyup', function (e) {

来自你的评论：

当我添加提醒时，它仍然没有显示限制警报，我可以输入更多...

如果您需要停止使用最大数量的字符，则需要将事件从 keyup 更改为 keypress 。因为这最后一个事件让你停止（或阻止默认动作）输入其他字符。

摘录：

＆＃13;

var maxlengthmap = {};
maxlengthmap['textarea1'] = 5;
maxlengthmap['textarea2'] = 3;
maxlengthmap['textarea3'] = 7;
maxlengthmap['textarea2'] = 1;


$('input[type=textarea]').on('keypress', function (e) {
    var currentValue = this.value + String.fromCharCode(e.which);
    if (currentValue.length  > maxlengthmap[this.id]) {
        e.preventDefault();
        console.log('Exceeded');
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="textarea" id="textarea1"/><br/>
<input type="textarea" id="textarea2"/><br/>
<input type="textarea" id="textarea3"/><br/>
<input type="textarea" id="textarea4"/><br/>

＆＃13;

Answer 2

您的代码中存在一些错误。请注意：这是jquery.keyup，全部为小写。在你的html中，输入类型是 text ，而不是 textarea

正确的代码：

var maxlengthmap = {};
maxlengthmap['textarea1'] = 5;
maxlengthmap['textarea2'] = 3;
maxlengthmap['textarea3'] = 7;
maxlengthmap['textarea4'] = 1;


$('input[type="text"]').each(function () {
    $(this).keyup(function() {
    if ($(this).val().length > maxlengthmap[$(this).attr("id")]) {
        alert('Exceeded');
    }
  });

});

Answer 3

您可以使用解决方案https://jsfiddle.net/8xo98vzk/10/

$('input[type="text"]').keyup(function() {
  if ($(this).val().length > parseInt($(this).data('max-char'))) {
    alert('Exceeded');
    $(this).focusout();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="textarea1" data-max-char='5' /><br/>
<input type="text" id="textarea2" data-max-char='3' /><br/>
<input type="text" id="textarea3" data-max-char='7' /><br/>
<input type="text" id="textarea4" data-max-char='1' /><br/>

使用数据属性data-max-char而不是input textbox中的最大字符数组。

不要遍历所有输入文本框，只需检查焦点input textbox。

代码中的错误

$(this).value;应更改为$(this).val();
<input type="textarea">应更改为<input type="text">
keyUp应更改为keyup

希望你能。

jQuery：具有自定义参数

3 个答案: