javascript 更改需要刷新

Question

我正在尝试制作一个文本框，带有一个计数器来显示您还剩下多少个标志（纯粹用于用户界面目的，而不是实际验证）。

我尝试使用此代码：

function checkRemainingChars () {

    var maxChars = 500;
    var text = document.getElementById('textArea').value;
    console.log(text);
    var usedChars = text.length;
    var remainingChars = maxChars - usedChars;
    var message = "<p>" + remainingChars + "out of " + maxChars + " characters remaining </p>";
    console.log(message);
    $('#remaining').append(message);
}


$(document).ready( function () {

    $('#textArea').on('change',checkRemainingChars());

});

#textArea 是用户放置文本的文本区域，#remaining 是一个旁白，显示他还剩多少符号。

这仅在页面 loads/refreshes 时有效。然后我尝试添加一些简单的东西，以消除我的代码中可能出现的错误：

$(document).ready( function () {

    $('#textArea').on("change",alert(1));

});

但即使在这里，我也只会在刷新页面时收到警报。我需要做什么才能在用户键入内容后立即更新文本？

Answer 1

您正在调用该方法并将其 returns 分配给事件侦听器，而不是分配对该方法的引用。

$('#textArea').on('change',checkRemainingChars()); 
                                              ^^

放下 ()

$('#textArea').on('change', checkRemainingChars);

如果您需要在页面加载时运行的方法，您可以触发更改事件。

$('#textArea').on('change', checkRemainingChars).trigger("change");

或者您可以直接调用change。

最后，您要将消息附加到剩余内容的元素中。我不认为你想要追加，你可能想要使用

$('#remaining').html(message);

Answer 2

change 事件仅在您更改内容后离开 textarea 时触发。使用 keyup event.

可能更有用

$('#textArea').keyup(function(){
    var chars_remaining = 500 - $(this).text().length;
    alert("remaingin chars: "+chars_remaining);
});

Answer 3

请查看附件片段：

function checkRemainingChars () {
    var maxChars = 500;
    var text = $('#textArea').val();
    var usedChars = text.length;
    var remainingChars = maxChars - usedChars;
    var message = "<p>" + remainingChars + "out of " + maxChars + " characters remaining </p>";
    
  $('#remaining').html('');
    $('#remaining').html(message);
}

  $('#textArea').on('change keyup paste',checkRemainingChars);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div id="remaining"></div>

<textarea id="textArea" rows="4" cols="50">
I'm trying to make a textbox, with a counter to show how many signs you have left (pure for user interface purposes, not the actual validation). 
</textarea>

javascript 更改需要刷新

javascript on change needs refresh

javascript

jquery

onchange