使用jQuery的TextArea字符计数器 [英] TextArea character counter using jQuery

问题描述

我无法弄清楚为什么我的JavaScript无法正常工作.它使用j Query并应该选择所有文本区域标签，然后为每个文本区域计算在其中键入的字符数，然后在达到最大长度后不允许用户再输入任何字符，还显示一个字符计数器在每个文本区域框下. 它所做的只是显示每个按键后剩余的字符而不减少，并且在达到最大长度时也不会停止.它还没有选择所有的文本区域，只使用找到的第一个文本区域.

这是我的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);
    }
  }
});
});
});  

当我添加了一些警报(未在此处的代码中显示)时，它表明它没有进入带有keyup事件的this.on部分. 我将这个外部js文件包含到了创建页面并包含我的文本区域的jsp文件中. 我还将id和maxlength属性添加到textarea元素. 任何帮助都将非常感谢.

解决方案

噢，别这样，如果可以的话，为什么你需要上面的代码: http://jsfiddle.net/btyCz/

有限的演示 http://jsfiddle.net/jnXEy/(我已将限制设置为20).

请让我知道是否想念任何东西，但以下内容应有帮助:)

您始终可以将支票放在长度上以限制长度.

代码

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

HTML

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

I'm having trouble figuring out why my JavaScript is not working right. Its with j Query and its supposed to select all the text area tags and then for each text area count the number of characters typed in them and then not allow the user to enter any more after it hits the max length, also showing a character counter under each text area box. What its doing is only showing the characters remaining but not decrementing after each key pressed and also not stopping when it hits the max length. It also doesn't select all of the text areas, it only takes the first one it finds.

Here is my 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);
    }
  }
});
});
});  

When i added some alerts, not shown in the code here, it showed that it was not getting to the this.on section with the keyup event. I included this external js file to a jsp file which my page is made and has my text areas in. I also add an id and maxlength attribute to the textarea element. Any help would be great thank you.

解决方案

Oh man - Donno why you need the code above if you can do this: http://jsfiddle.net/btyCz/

Limited demo http://jsfiddle.net/jnXEy/ ( I have set the limit to 20) feel free to play around.

Please lemme know if I missed anythig, but the below should help:)

You can always put the check on the length to limit it.

code

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

HTML

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

这篇关于使用jQuery的TextArea字符计数器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！