文本区域计数字符验证

Posted 2023-02-22

【中文标题】文本区域计数字符验证

【英文标题】：Textarea count characters validation

【发布时间】：2013-09-07 15:13:50

【问题描述】：

我正在使用 vb.net 编写一个 asp 页面，我需要计算我的 textarea 中的字符数并显示消息：“X characters Remaining。”

这是我的 ASP 代码：

  <td valign='top'>
                <textarea rows="5" id="content_txt" name="TextArea1" runat="server" maxlength="50"></textarea>
            </td>

【问题讨论】：

Count characters in textarea的可能重复

【参考方案1】：

这是JSFiddle

html：

<textarea rows="5" id="content_txt" name="TextArea1" runat="server" maxlength="50"></textarea>
<p id="message"></p>

JS：

var area = document.getElementById("content_txt");
var message = document.getElementById("message");
var maxLength = 50;
var checkLength = function() 
    if(area.value.length < maxLength) 
        message.innerHTML = (maxLength-area.value.length) + " characters remaining";
    

setInterval(checkLength, 300);

【讨论】：

想知道为什么你更喜欢时间间隔而不是事件

将 < 替换为 <= - 修复了计数停留在 1 的问题。

【参考方案2】：

我的朋友有一个小而实用的解决方案，试试这个：

HTML 代码

    <textarea name="message"placeholder="Reply message..." maxlength="155" onkeyup="counter(this);"></textarea>
<div id="counter_div">0/155</div>

javascript 代码

<script>
    function counter(msg)
        document.getElementById('counter_div').innerHTML = msg.value.length+'/155';
    
</script>

这种情况限制为 155 个字符。

【讨论】：

支持总结的解决方案。简单

【参考方案3】：

<td valign='top'>
  <textarea rows="5" id="content_txt" name="TextArea1" runat="server" maxlength="50"></textarea>
  <span id="character-count">100</span> characters remaining.
</td>


var totallength = 100;

$('textarea#input').on('keydown, keyup', function(e) 
     $('span#character-count').text((totallength - input.val().length));
);

【参考方案4】：

试试这个

  function fix(dis)
    
      var total=50; // ho many you want to show
      var val = dis.value;

      var count = val.length;
      document.getElementById('remaining').innerHTML= total-count;
    

    <td valign='top'>
        <textarea rows="5" id="content_txt" name="TextArea1" runat="server" maxlength="50" onkeyup="fix(this)"></textarea>
    </td>

    <p><span id="remaining">0</span> Characters remaining</p>

【参考方案5】：

这将使用 jquery var length = $('#content_txt').val().length; 返回文本区域的当前长度，其余的逻辑你必须试一试..