Question

大家好日子我在页面上有一个简单的textarea，我需要动态计算符号数，显示表格下面剩余多少，限制字符数应为350。提前致谢。我真正需要的是显示要输入多少个符号

function limit(element)
{
    var max_chars = 350;

    if(element.value.length > max_chars) {
        element.value = element.value.substr(0, max_chars);
    }
}

	<textarea onkeydown="limit(this);" onkeyup="limit(this);"></textarea>

Answer 1

这是一个简单的解决方案，只在占位符中显示leftCharacters;

<script>
    $(function() {
      var $textarea = $('textarea');
      var $input = $('input[name="spaces"]');
      var maxLength = $textarea.attr('maxlength');
      $input.val(maxLength);

      $textarea.on('input', function() {
        var currentLength = $textarea.val().length;
        var leftCharacters = (maxLength - currentLength);
        $input.val(leftCharacters);
        });
    });

</script>

<textarea name=test" maxlength="350"></textarea>
<input name="spaces" disabled />

Answer 2

＆＃13;

var max_chars = 5;
var charsLeftDisplay = document.getElementById("charsLeft");

function limit(element) {
  if (element.value.length > max_chars) {
    element.value = element.value.slice(0, -1);
    return false;
  }
  charsLeftDisplay.innerHTML = (max_chars - element.value.length) + " characters left...";
}

＆＃13;

<textarea onkeyup="limit(this)"></textarea>
<p id="charsLeft"></p>

＆＃13;

Answer 3

我认为最好的方法是使用JQuery

这是html

<textarea id="textareaID" rows="4" cols="50" maxlength="50"></textarea>

<p id="numberOfChars"><strong>Character typed:</strong> 0</p>
<p><strong>Max Character:</strong> 50</p>

这是jquery代码

$('#textareaID').bind('input propertychange', function() {
      if(this.value.length){
        $("#numberOfChars").html("<strong>Character typed:</strong> "+this.value.length);
      }
});

这里也是一个工作小提琴https://jsfiddle.net/Visrozar/zbw7j64j/

Answer 4

此解决方案确实非常有效：

1 - 在您的textarea元素（上方或下方）附近的HTML文件中插入id =“textarea_count”的div，例如在您要显示剩余字符的位置：

 <div class="form-group">
        <label asp-for="DescCompetencia" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <textarea asp-for="DescCompetencia" class="form-control" rows="5"></textarea>
            <span asp-validation-for="DescCompetencia" class="text-danger"></span>
            <div id="textarea_count"></div>
        </div>
    </div>

2 - 在您正在编辑textarea元素的页面中插入javascript文件或/ html元素之后：

$(document).ready(function () {
var text_max =  500; //change by your max desired characters
var text_min = 7; //change to your min desired characters (or to zero, if field can be blank))
if ($('#DescCompetencia').length) {
    var texto_disponivel = text_max - $('#DescCompetencia').val().length;
}
$('#textarea_count').html(texto_disponivel + ' caracteres disponíveis para digitar');
$('#DescCompetencia').keyup(function () {
    var text_length = $('#DescCompetencia').val().length;
    var text_remaining = text_max - text_length;
    if (text_length <= text_min) { 
        $('#textarea_count').html(text_remaining + ' caracteres remanescentes. Digite ' + text_min + ' ou mais caracteres.');
    }
    else {
        $('#textarea_count').html(text_remaining + ' caracteres remanescentes');
    }
});    });

在调用上述函数之前，

必须已经加载了Jquery 。

在简单输入中动态计算textarea符号

4 个答案: