Question

我有一个用户创建帐户的网站，该信息保存到json。当用户点击＆＃34; save＆＃34;页面刷新，数据在从json拉出的字段中回显。我遇到的问题是在一个文本区域我想限制字符数量。如果该textarea中没有数据，该脚本可以正常工作。我无法弄清楚的问题是，如果有数据，因为用户保存了数据，倒计时文本仍为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()。该方法将执行事件处理程序，从而实现所需的结果。

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

//*[@id='ref_154606011']/span[contains(@class,'refinementLink')]

＆＃13;

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

＆＃13;

$(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
});

＆＃13;

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

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

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，则为剩余字符

2 个答案: