web-dev-qa-db-ja.com

テキストエリアの文字を数える

この website でテキストエリアの文字カウントを開発しています。現時点では、フィールドにある文字の長さ（先頭は0）が見つからないため、NaNと表示されます。したがって、数字は500になります。chrome開発者ツールのコンソールでは、エラーが発生します。私のコードはすべてサイト上にあり、textareaフィールドの文字数に通常のJavaScriptであるjQueryを使用しようとしましたが、何も機能していないようです。

Contact.jsファイルにあるjQueryとJavaScriptコードの両方で間違っていることを教えてください。

$(document).ready(function() {
    var tel1 = document.forms["form"].elements.tel1;
    var tel2 = document.forms["form"].elements.tel2;
    var textarea = document.forms["form"].elements.textarea;
    var clock = document.getElementById("clock");
    var count = document.getElementById("count");

    tel1.addEventListener("keyup", function (e){
        checkTel(tel1.value, tel2);
    });

    tel2.addEventListener("keyup", function (e){
        checkTel(tel2.value, tel3);
    });

    /*$("#textarea").keyup(function(){
        var length = textarea.length;
        console.log(length);
        var charactersLeft = 500 - length;
        console.log(charactersLeft);
        count.innerHTML = "Characters left: " + charactersLeft;
        console.log("Characters left: " + charactersLeft);
    });​*/

    textarea.addEventListener("keypress", textareaLengthCheck(textarea), false);
});

function checkTel(input, nextField) {
    if (input.length == 3) {
        nextField.focus();
    } else if (input.length > 0) {
        clock.style.display = "block";
    } 
}

function textareaLengthCheck(textarea) {
    var length = textarea.length;
    var charactersLeft = 500 - length;
    count.innerHTML = "Characters left: " + charactersLeft;
}
javascriptjqueryhtmltextareacharactercount
29
Ilan Biala
$("#textarea").keyup(function(){
  $("#count").text($(this).val().length);
});

上記はあなたが望むことをします。カウントダウンをしたい場合は、これに変更してください：

$("#textarea").keyup(function(){
  $("#count").text("Characters left: " + (500 - $(this).val().length));
});

または、次のコードを使用して、jQueryなしで同じことを実現できます。 （@Nietに感謝）

document.getElementById('textarea').onkeyup = function () {
  document.getElementById('count').innerHTML = "Characters left: " + (500 - this.value.length);
};
67
Andrew Hubbs

accepted承認されたソリューションは時代遅れです。

keyupイベントが発生しない2つのシナリオを次に示します。

  1. ユーザーがテキストをtextareaにドラッグします。
  2. ユーザーは、右クリック（コンテキストメニュー）でtextareaにテキストをコピーアンドペーストします。

より堅牢なソリューションを使用するには、代わりにHTML5 inputイベントを使用します。

<textarea maxlength='140'></textarea>

JavaScript（ デモ ）：

const textarea = document.querySelector("textarea");

textarea.addEventListener("input", event => {
    const target = event.currentTarget;
    const maxLength = target.getAttribute("maxlength");
    const currentLength = target.value.length;

    if (currentLength >= maxLength) {
        return console.log("You have reached the maximum number of characters.");
    }

    console.log(`${maxLength - currentLength} chars left`);
});

そして、jQueryを絶対に使用したい場合：

$('textarea').on("input", function(){
    var maxlength = $(this).attr("maxlength");
    var currentLength = $(this).val().length;

    if( currentLength >= maxlength ){
        console.log("You have reached the maximum number of characters.");
    }else{
        console.log(maxlength - currentLength + " chars left");
    }
});
15
Etienne Martin
textarea.addEventListener("keypress", textareaLengthCheck(textarea), false);

呼び出しtextareaLengthCheckであり、その戻り値をイベントリスナーに割り当てます。これが、ロード後に更新も何もしない理由です。これを試して：

textarea.addEventListener("keypress",textareaLengthCheck,false);

それはさておき：

var length = textarea.length;

textareaは実際のテキストエリアであり、値ではありません。代わりにこれを試してください：

var length = textarea.value.length;

前の提案と組み合わせると、関数は次のようになります。

function textareaLengthCheck() {
    var length = this.value.length;
    // rest of code
};
13
Niet the Dark Absol

これは簡単なコードです。うまくいけばいい

$(document).ready(function() {
var text_max = 99;
$('#textarea_feedback').html(text_max + ' characters remaining');

$('#textarea').keyup(function() {
    var text_length = $('#textarea').val().length;
    var text_remaining = text_max - text_length;

    $('#textarea_feedback').html(text_remaining + ' characters remaining');
});

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="textarea" rows="8" cols="30" maxlength="99" ></textarea>
<div id="textarea_feedback"></div>
10
Shafiqul Islam

このコードは、maxlengthのtextarea属性から最大値を取得し、ユーザーが入力するにつれて値を減らします。

< [〜＃〜] demo [〜＃〜] >

var el_t = document.getElementById('textarea');
var length = el_t.getAttribute("maxlength");
var el_c = document.getElementById('count');
el_c.innerHTML = length;
el_t.onkeyup = function () {
  document.getElementById('count').innerHTML = (length - this.value.length);
};
<textarea id="textarea" name="text"
 maxlength="500"></textarea>
<span id="count"></span>
2
Kurenai Kunai

JQueryを使用しないシンプルなソリューションが必要な場合は、次の方法があります。

フォームに配置するテキストエリアとメッセージコンテナ：

<textarea onKeyUp="count_it()" id="text" name="text"></textarea>
Length <span id="counter"></span>

JavaScript：

<script>
function count_it() {
    document.getElementById('counter').innerHTML = document.getElementById('text').value.length;
}
count_it();
</script>

スクリプトは、最初にキーストロークごとに文字をカウントし、カウンタースパンに数字を入れます。

マーティン

1
Martin Joergensen

このソリューションは、キーボードイベントとマウスイベントに応答し、初期テキストに適用されます。

    $(document).ready(function () {
        $('textarea').bind('input propertychange', function () {
            atualizaTextoContador($(this));
        });

        $('textarea').each(function () {
            atualizaTextoContador($(this));
        });
    });

    function atualizaTextoContador(textarea) {
        var spanContador = textarea.next('span.contador');
        var maxlength = textarea.attr('maxlength');
        if (!spanContador || !maxlength)
            return;
        var numCaracteres = textarea.val().length;
        spanContador.html(numCaracteres + ' / ' + maxlength);
    }
    span.contador {
        display: block;
        margin-top: -20px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea maxlength="100" rows="4">initial text</textarea>
<span class="contador"></span>
0
Junior

Chromeはmaxlength属性を持つtextareaの文字を間違ってカウントします の理由で、受け入れられた答えがtextareasで正確に機能しないことがわかりました。情報をデータベースに保存するときにどれだけのスペースが使用されるかを知る必要があります。また、キーアップの使用は、クリップボードからのテキストのドラッグアンドドロップと貼り付けのために減価されています。そのため、inputおよびpropertychangeイベントを使用しました。以下は改行文字を考慮し、textareaの長さを正確に計算します。

$(function() {
  $("#myTextArea").on("input propertychange", function(event) {
    var curlen = $(this).val().replace(/\r(?!\n)|\n(?!\r)/g, "\r\n").length;

    $("#counter").html(curlen);
  });
});

$("#counter").text($("#myTextArea").val().replace(/\r(?!\n)|\n(?!\r)/g, "\r\n").length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="myTextArea"></textarea><br>
Size: <span id="counter" />
0
Nielsvh
var maxchar = 10;
$('#message').after('<span id="count" class="counter"></span>');
$('#count').html(maxchar+' of '+maxchar);
$('#message').attr('maxlength', maxchar);
$('#message').parent().addClass('wrap-text');
$('#message').on("keydown", function(e){
        var len =  $('#message').val().length;
        if (len >= maxchar && e.keyCode != 8)
                   e.preventDefault();
        else if(len <= maxchar && e.keyCode == 8){
                if(len <= maxchar && len != 0)
                        $('#count').html(maxchar+' of '+(maxchar - len +1));
                else if(len == 0)
                        $('#count').html(maxchar+' of '+(maxchar - len));
        }else
                 $('#count').html(maxchar+' of '+(maxchar - len-1)); 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="message" name="text"></textarea>
0
Manish Kumar Jaiswal MJ
    $(document).ready(function(){ 
    $('#characterLeft').text('140 characters left');
    $('#message').keydown(function () {
        var max = 140;
        var len = $(this).val().length;
        if (len >= max) {
            $('#characterLeft').text('You have reached the limit');
            $('#characterLeft').addClass('red');
            $('#btnSubmit').addClass('disabled');            
        } 
        else {
            var ch = max - len;
            $('#characterLeft').text(ch + ' characters left');
            $('#btnSubmit').removeClass('disabled');
            $('#characterLeft').removeClass('red');            
        }
    });    
});
0
PK-1825

彼らは、IEにはinputイベントに問題があるが、それ以外はかなり簡単な解決策であると言う。

ta = document.querySelector("textarea");
count = document.querySelector("label");

ta.addEventListener("input", function (e) {
  count.innerHTML = this.value.length;
});
<textarea id="my-textarea" rows="4" cols="50" maxlength="10">
</textarea>
<label for="my-textarea"></label>
0
Ron Royston