如果数据存在则剩余字符 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()。该方法将执行事件处理程序，从而达到预期的结果。

执行所有附加到给定事件类型的匹配元素的处理程序和行为。

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