Javascript 使用jQuery的TextArea字符计数器

我很难弄清楚为什么我的JavaScript不能正常工作。Its with j Query和Its应选择所有文本区域标记，然后为每个文本区域计算键入的字符数，然后在达到最大长度后，不允许用户再输入，同时在每个文本区域框下显示字符计数器。 它所做的只是显示剩余的字符，而不是在每个按键后递减，并且在达到最大长度时也不会停止。它也不会选择所有的文本区域，它只选择它找到的第一个文本区域

这是我的TextAreaCounter.js

$(document).ready(function){
var $texts = $('textarea[maxlength]');
$texts.each(function){
  $var $this = $(this),
  max = $(this).attr('maxlength'),
  textId = $(this)attr.('id'),
  $parent = $this.parent(),
  countId = textId+'-count';

$div = $('<div>Characters Remaining: </div>').addClass('count-down').insertAfter($this);
$input = $('<input></input>').attr({
    type:"text",
    readOnly: "readOnly",
    value: max,
    id: countId
    }).css({
      width: "25px"
      marginTop: "5px"
      marginBottom: "10px"
    }).addClass('readOnly').appendTo($div);

$this.on({
  keyup: function(){
    val = $this.val(),
    countVal = $('#'+countId).val(),
    if(val.length > max){ 
      $this.val(val.substr(0,max));
      alert('Max length exceeded: ' +max);
      return false;
    }else{
      $('#'+countId).val(max-val.length);
    }
  },
  blur: function(){
    val=$this.val();
    if(val.length > max){
      $this.val(val.substr(0,max));
      alert('Max length exceeded: ' +max);
      return false;
    }else{
      $('#'+countId).val(max-val.length);
    }
  }
});
});
});  

$（文档）.ready（函数）{
var$texts=$（'textarea[maxlength]”）；
$text.每个（功能）{
$var$this=$（this），
max=$（this.attr（'maxlength'），
textId=$（此）属性。（'id'），
$parent=$this.parent（），
countId=textId+'-count'；
$div=$（‘剩余字符：’）.addClass（‘倒计时’）.insertAfter（$this）；
$input=$（''）.attr({
键入：“文本”，
只读：“只读”，
值：max，
id:countId
}).css({
宽度：“25px”
玛金托普：“5px”
marginBottom：“10px”
}).addClass（“只读”）.appendTo（$div）；
$this.on({
keyup:function（）{
val=$this.val（），
countVal=$（'#'+countId）.val（），
如果（val.length>max）{
$this.val（val.substr（0，max））；
警报（'超过最大长度：'+最大值）；
返回false；
}否则{
$（'#'+countId）.val（max-val.length）；
}
},
模糊：函数（）{
val=$this.val（）；
如果（值长度>最大值）{
$this.val（val.substr（0，max））；
警报（'超过最大长度：'+最大值）；
返回false；
}否则{
$（'#'+countId）.val（max-val.length）；
}
}
});
});
});  

当我添加了一些未在这里的代码中显示的警报时，它表明它没有通过keyup事件到达this.on部分。 我将这个外部js文件包含到一个jsp文件中，我的页面就是在这个jsp文件中创建的，其中包含我的文本区域。 我还向textarea元素添加了id和maxlength属性。

---

任何帮助都很好，谢谢你

哦，伙计-Donno如果你能做到这一点，为什么你需要上面的代码：

有限演示（我已将限制设置为20）尽情玩玩

如果我遗漏了什么，请告诉我，但是下面的内容应该会有所帮助。

：）

你可以把支票放在长度上以限制它

代码

$('#myInput').keyup(function() {
    $('#charCount').text( this.value.replace(/{.*}/g, '').length );
});​

HTML

<textarea id="myInput"></textarea> <br>
Counter: <span id="charCount"></span>​

柜台：​

您的代码有许多语法错误。 现在试试这个：

$(document).ready(function () { // bracket was missing here...
    var $texts = $('textarea[maxlength]');
    $texts.each(function () { // bracket was missing here...
        var $this = $(this), // incorrect variable declaration here...
        max = $this.attr('maxlength'),
        textId = $this.attr('id'), // incorrect method call here...
        $parent = $this.parent(),
        countId = textId + '-count',

        $div = $('<div>Characters Remaining: </div>').addClass('count-down').insertAfter($this),
        $input = $('<input></input>').attr({
            type: "text",
            readOnly: "readOnly",
            value: max,
            id: countId
        }).css({
            width: "25px", // missing comma here...
            marginTop: "5px", // missing comma here...
            marginBottom: "10px"
        }).addClass('readOnly').appendTo($div);

        $this.on({
            keyup: function () {
                var val = $this.val(),
                countVal = $('#' + countId).val(); // must have semicolon here...
                if (val.length > max) {
                    $this.val(val.substr(0, max));
                    alert('Max length exceeded: ' + max);
                    return false;
                } else {
                    $('#' + countId).val(max - val.length);
                }
            },
            blur: function () {
                var val = $this.val();
                if (val.length > max) {
                    $this.val(val.substr(0, max));
                    alert('Max length exceeded: ' + max);
                    return false;
                } else {
                    $('#' + countId).val(max - val.length);
                }
            }
        });
    });
});

$（document）.ready（函数（）{//此处缺少括号）。。。
var$texts=$（'textarea[maxlength]”）；
$texts.each（函数（）{//括号在此缺失。。。
var$this=$（this），//此处的变量声明不正确。。。
max=$this.attr（'maxlength'），
textId=$this.attr（'id'），//此处的方法调用不正确。。。
$parent=$this.parent（），
countId=textId+'-count'，
$div=$（‘剩余字符：’）.addClass（‘倒计时’）.insertAfter（$this），
$input=$（''）.attr({
键入：“文本”，
只读：“只读”，
值：max，
id:countId
}).css({
宽度：“25px”，//此处缺少逗号。。。
marginTop：“5px”//此处缺少逗号。。。
marginBottom：“10px”
}).addClass（“只读”）.appendTo（$div）；
$this.on({
keyup：函数（）{
var val=$this.val（），
countVal=$（'#'+countId）.val（）；//此处必须有分号。。。
如果（值长度>最大值）{
$this.val（val.substr（0，max））；
警报（'超过最大长度：'+最大值）；
返回false；
}否则{
$（'#'+countId）.val（max-val.length）；
}
},
模糊：函数（）{
var val=$this.val（）；
如果（值长度>最大值）{
$this.val（val.substr（0，max））；
警报（'超过最大长度：'+最大值）；
返回false；
}否则{
$（'#'+countId）.val（max-val.length）；
}
}
});
});
});

你应该通过

限制文本区域中的字符

限制字符数的一种简单方法是

<textarea maxlength="50">
Enter text here
</textarea>

在此处输入文本

有关更多数据，请访问

---

用正则表达式替换的是什么？我不认为它在做你想要它做的事-在你的小提琴中键入

“asdf{sdf}asdf”

，然后看看计数是什么…在

$（'#charCount'）.text（这个.value.replace（/{.*}/g'）.length中
替换（/{.*}/g'）有什么用@nnnn saweet bruv<代码>：）
你好吗？我将很快替换
：）
@shrujanshetty
：）
很好，g=global，通配符*和etal@Tats_innit那更容易，谢谢！：）但我想我还是不明白如何用这个代码u限制特定数量的字符（真的很累，不能思考…）还有为什么我的代码只选择了第一个文本区域标记，而不是全部。是的，很抱歉，这只是问题中的一个输入错误。注意，当用户键入时，将字符串截断回允许的最大长度非常笨拙-最好更改背景色或以其他方式将其突出显示为错误，并将其留给用户修复。否则，当用户试图编辑字段的开头或中间，而您开始从结尾删除额外的字符时，他们会感到困惑…非常感谢：）但是您能告诉我哪些行号有语法错误吗，因为我看不到它们。（我不小心在var$texts=$（'textarea[maxlength]）中有一个额外的单引号；在我的解释中，但我修复了它。谢谢你，据我记忆所及，我用注释更新了代码，在那里我更改了你的代码。啊，是的，所有这些都是我犯的愚蠢的打字错误