剩余字符（如果数据存在）Javascript

Question

我有一个网站，用户可以在其中创建一个帐户，并且该信息会保存到 JSON。当用户点击“保存”时，页面会刷新，并且该数据会在从 JSON 拉取的字段中回显。我遇到的问题是在一个文本区域中我想限制字符数。如果该文本区域中没有数据，该脚本将完美运行。我无法弄清楚的问题是，如果有数据，因为用户保存了它，倒计时文本仍然是 100，用户可以继续输入更多信息。我想要的是当页面刷新时，Javascript 计算该文本区域中预填充的 JSON 信息并计算。基本上，一旦用户将数据保存到 JSON 并且页面刷新，Javascript 就会计算预先填充的任何文本。希望这是有道理的。这是我的代码。

文本区

<textarea spellcheck="false" id="textarea" maxlength="100" 
name="welcome" required><?php if (!empty($main_data->welcome)) 
{ echo urldecode($main_data->welcome); } ?></textarea>

Javascript:

<script>   
$(document).ready(function() {
var text_max = 100;
$('#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>

Answer 1

您可以 trigger() 在页面加载时绑定该事件。该方法将执行事件处理程序，从而实现预期的结果。

Execute all handlers and behaviors attached to the matched elements for the given event type.

$('#textarea').on(......).trigger('keyup'); //Notice here

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

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

    $('#textarea_feedback').html(text_remaining + ' characters remaining');
  }).trigger('keyup'); //Notice here
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea spellcheck="false" id="textarea" maxlength="100" name="welcome" required>PrefilledText</textarea>
<div id="textarea_feedback"></div>

但是，我建议您创建一个方法。然后您可以在页面加载时调用它并将其用作事件处理程序。

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

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

//Set on page load
setFeedback();

//Bind event
$('#textarea').on('keyup', setFeedback);

Answer 2

将您的代码替换为以下内容：

<script>   
$(document).ready(function() {
    $('#textarea').keyup(showRemainingCharacters).trigger("keyup");
});
function showRemainingCharacters() {
    var maxLength = 100,
        currentLength = $('#textarea').val().length,
        remainingLength = maxLength - currentLength;

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

</script>

剩余字符（如果数据存在）Javascript

Remaining characters if data exists Javascript

javascript

jquery

jquery-events