Question

我正在开发一个项目，要求我计算在文本框中输入的字符数，并在页面的其他位置动态显示结果。

正如我所说，这最好用jQuery或Javascript完成。

提前致谢。

Answer 1

你可以在jQuery中做到这一点（因为你说你喜欢它），假设你想要在id =“characters”的div中显示字符数：

$('textarea').keyup(updateCount);
$('textarea').keydown(updateCount);

function updateCount() {
    var cs = $(this).val().length;
    $('#characters').text(cs);
}

更新：jsFiddle（由Dreami提供）

更新2：更新以包括长按的keydown。

Answer 2

<script type="text/javascript">
function countChars(countfrom,displayto) {
  var len = document.getElementById(countfrom).value.length;
  document.getElementById(displayto).innerHTML = len;
}
</script>

<textarea id="data" cols="40" rows="5"
onkeyup="countChars('data','charcount');" onkeydown="countChars('data','charcount');" onmouseout="countChars('data','charcount');"></textarea><br>
<span id="charcount">0</span> characters entered.

普通Javascript。

Answer 3

这是我的偏好：

<textarea></textarea>         
<span id="characters" style="color:#999;">400</span> <span style="color:#999;">left</span>

然后jquery阻止

$('textarea').keyup(updateCount);
$('textarea').keydown(updateCount);

function updateCount() {
var cs = [400- $(this).val().length];
$('#characters').text(cs);
}

Answer 4

我想分享一下我在项目中使用的答案，并且工作正常。

<asp:TextBox ID="txtComments" runat="server" TextMode="MultiLine" Rows="4" Columns="50" placeholder="Maximum limit: 100 characters"></asp:TextBox><br />
<span id="spnCharLeft"></span>

<script type='text/javascript'>
    $('#spnCharLeft').css('display', 'none');
    var maxLimit = 100;
    $(document).ready(function () {
        $('#<%= txtComments.ClientID %>').keyup(function () {
            var lengthCount = this.value.length;              
            if (lengthCount > maxLimit) {
                this.value = this.value.substring(0, maxLimit);
                var charactersLeft = maxLimit - lengthCount + 1;                   
            }
            else {                   
                var charactersLeft = maxLimit - lengthCount;                   
            }
            $('#spnCharLeft').css('display', 'block');
            $('#spnCharLeft').text(charactersLeft + ' Characters left');
        });
    });
</script>

来源：URL

Answer 5

虽然它已经解决了，但我有兴趣分享我在其中一个项目中使用过的东西：

<textarea id="message" cols="300" rows="200" onkeyup="countChar(this)"
          placeholder="Type your message ..." >
</textarea>

<input id="text-character" class="input-mini uneditable-input"
       placeholder="0 Chars" readonly />
<input id="text-parts" class="input-mini uneditable-input"
       placeholder="0 Parts" readonly />
<input id="text-remaining" class="input-medium uneditable-input"
       placeholder="160 Chars Remaining" readonly />

Javascript代码：

function countChar(val) {

    var len = val.value.length;
    var ctext = len + " Chars";

    var str = val.value;
    var parts = [];
    var partSize = 160;

    while (str) {
        if (str.length < partSize) {
            var rtext = (partSize - str.length) + " Chars Remaining";
            parts.push(str);
            break;
        }
        else {
            parts.push(str.substr(0, partSize));
            str = str.substr(partSize);
        }



    }
    var ptext = parts.length + " Parts";

    $('#text-character').val(ctext);
    $('#text-parts').val(ptext);
    $('#text-remaining').val(rtext);

}

Answer 6

<script Language="JavaScript">
<!-- 
function Length_TextField_Validator()
{
   var len = form_name.text_name.value.length; //the length
   return (true);
}
-->
</script>

<form name="form_name" method="get" action="http://www.codeave.com/html/get.asp" 
onsubmit="return Length_TextField_Validator()">
<input type="text" name="text_name">
<input type="submit" value="Submit">
</form>

来源：Text Validation

使用Javascript计算和显示文本框中的字符数

6 个答案: