49

このウェブサイトのテキストエリアの文字数を開発しています。現在、フィールドに含まれる文字数の長さが見つからないため、NaN と表示されます。最初は 0 です。したがって、数字は 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;
}
4

11 に答える 11

94 
$("#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);
};
于 2012-12-29T22:21:51.090 に答える
13 
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
};
于 2012-12-29T22:20:14.493 に答える
11

ここに簡単なコードがあります。それが機能していることを願っています

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

于 2014-06-17T04:18:44.757 に答える
4

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

<デモ>

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>

于 2016-11-03T07:10:35.440 に答える