javascript - 如果数据存在则剩余字符 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()在页面加载时绑定(bind)它之后的事件。该方法将执行事件处理程序，从而达到预期的结果。

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