当页面加载时执行 JQuery 函数，而不是在 .keyup 上

Question

我有一个看起来像这样的函数

var text_max = 200;
$('#count_message').html('0 / ' + text_max );

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

  $('#count_message').html(text_length + ' / ' + text_max);
});

我想要实现的是它在页面加载后立即执行，这意味着它计算文本区域中已有文本的文本长度，而不是在您键入内容后。

我试过把它放在这样的函数中

function myFunction() {

var text_max = 200;
$('#count_message').html('0 / ' + text_max );

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

  $('#count_message').html(text_length + ' / ' + text_max);
});

}

然后像这样在正文中执行它

<body onload="myFunction()">

但我做的事情不对，或者这不是做事的方式。我怀疑我必须在 .keyup(function() 中做一些事情，而不仅仅是将它加载到正文中，但不确定该做什么。我试图在 jQuery 事件方法中找到一些东西我可以使用，但找不到任何有用的东西。另外，尝试了我在这里找到的一些想法，但也没有用。

这是我从 https://www.codeply.com/go/s0F9Iz38yn/bootstrap-textarea-with-character-count-_-bootstrap-3

获得原始脚本的地方

编辑我想保留 .keyup 功能，但也想计算页面何时加载

Answer 1

从函数外部删除 keyup 并在加载时调用它，

var text_max = 200;
function myFunction($txt) {
   var text_length = $txt.val().length;
   var text_remaining = text_max - text_length;
   $('#count_message').html(text_length + ' / ' + text_max);    
}
$(function(){
   $('#text').keyup(function(){
       myFunction($(this));
   });
   myFunction($('#text'));
});

Answer 2

如果 "page load" 你的意思是 HTML 文档加载时，试试这个：

$(document).ready(function() {

});

如果 "page load" 你的意思是当页面上的所有图像也已加载时，请尝试以下操作：

$(window).load(function() {

});

Answer 3

只需在 window.onload 函数中调用您的函数：

//call on page load
window.onload = function () {
myFunction()
}

//call on keyup
$('#text').keyup(function () {
myFunction()
});

function myFunction() {
var text_max = 200;
$('#count_message').html('0 / ' + text_max );
var text_length = $('#text').val().length;
var text_remaining = text_max - text_length;

$('#count_message').html(text_length + ' / ' + text_max);
}

您可以继续为 keyUp 和 onLoad 调用相同的函数。

Answer 4

您需要为您的函数命名，以便您可以引用它：

let text_max = 200,
    text_length,
    text_remaining,
    getTextLength = function() {
      text_length = $('#text').val().length;
      text_remaining = text_max - text_length;
      $('#count_message').html(text_length + ' / ' + text_max);
    }


/* 
 * now you can bind the function to any event:
 */

$(document).on('ready', function(){
  $('#text').on('keyup', getTextLength);
  $(window).on('load', getTextLength);
})

#text {
  min-height: 123px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea id="text">As you can see, function runs once on window.load and once on each #text.keyup

Type anything...</textarea>
<span id="count_message"></span>

请注意，我没有在解析脚本时应用绑定，而是在 document.ready 上应用绑定（当 DOM 解析器达到 </html> 时）。通过这种方式，当我绑定到 DOM 时，我可以确保 #text 存在。如果脚本放在 DOM 中的 #text 之前，则接受的答案将失败，因为它执行得太早了。

当页面加载时执行 JQuery 函数，而不是在 .keyup 上

Execute JQuery function when the page is loaded instead on .keyup

javascript

jquery

onload