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

【问题标题】：dynamically count textarea symbols in a simple input在简单输入中动态计算 textarea 符号
【发布时间】：2017-02-13 09:05:25
【问题描述】：

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

function limit(element)
{
    var max_chars = 350;

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

	&lt;textarea onkeydown="limit(this);" onkeyup="limit(this);"&gt;&lt;/textarea&gt;

【问题讨论】：

问题是什么？到目前为止，您尝试过做什么，问题在哪里？到目前为止，您要求我们为您编写代码
stackoverflow.com/questions/9841363/…

标签： javascript

【解决方案1】：

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...";
}

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

【讨论】：

【解决方案2】：

我认为最好的方法是使用 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/

【讨论】：

【解决方案3】：

这是一个简单的解决方案，只需在占位符中显示 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 />

【讨论】：

【解决方案4】：

这个解决方案真的很管用：

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

 <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 - 在您的 javascript 文件中或在您正在编辑的页面中的 /html 元素之后插入 textarea 元素：

$(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。

【讨论】：