web-dev-qa-db-ja.com

Javascriptを使用してテキストボックス内の文字数を数えて表示する

テキストボックスに入力された文字数をカウントし、ページ上の他の場所に結果を動的に表示する必要があるプロジェクトに取り組んでいます。

先ほど言ったように、これはjQueryまたはJavascriptで行うことが望ましいでしょう。

前もって感謝します。

javascriptjquerytextboxcount
17
Kay

私は私のプロジェクトで使用した私の答えを共有したいと思います、それはうまく機能しています。

<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 [〜＃〜]

4
Pranesh Janarthanan

Id = "characters"のdivに文字数を表示したい場合、jQueryでこれを行うことができます（あなたがそれを好むと言ったため）。

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

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

更新： jsFiddle （by Dreami）

更新2：長押しのためのキーダウンを含めるための更新。

59
aurbano
<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

9
Clyde Lobo

これは私の好みです：

<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);
}
7
stkmedia

すでに解決されていますが、私のプロジェクトの1つで使用したものを共有したいと思います。

<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);

}
3
Naima
<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>

ソース： テキスト検証

2
ApprenticeHacker