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是用户放置文本的textarea，而#remaining是一个旁边的消息，他留下了多少迹象。

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

$(document).ready( function () {

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

});

但即使在这里，我只在刷新页面时收到警报。一旦用户输入内容，我该怎么做才能使文本更新？

Answer 1

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

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

请看一下附件摘录：

＆＃13;

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

＆＃13;

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

＆＃13;

更改javascript需要刷新

3 个答案: