页面加载时自动启动 JavaScript 函数

Question

我的JavaScript代码有一些问题，你可以在下面看到。

因此，代码对某些文本区域中的字符进行计数，并在用户键入内容时实时计数。根据符号计数，用户有两个信息：

1. 某些短信取决于计数
2. 字符数

问题是，当我们键入至少一个符号时，代码就会开始。但是在我的网站上，我在这个文本区域中有一些信息，这些信息在页面加载时从数据库加载，所以文本区域已经有一些符号。但是计数函数在页面加载时不会启动，正如我所说，我们需要键入(或删除(至少一个符号。

我知道，我认为我的代码应该如此工作，因为我使用onkeyup事件。 但是，我也尝试使用加载事件。 还尝试添加window.onload = countDescriptionChar(this);到脚本代码

但它仍然不起作用。

因此，我需要在页面加载时启动脚本(当我们没有按下任何键时(，并在用户按下某个键时保存实时计算字符的功能。

我想我做错了什么...

你在下面有我所有的代码

感谢您的帮助！

这是我用于它的JavaScript代码

function countDescriptionChar(val) {
var len = val.value.length;
if ((len >= 0) && (len < 105)) {
$('#symbolsDescription').text(len);
document.getElementById("statusDescription").innerHTML = "<span style='color: orangered'>less then 105 characters</span>";
}
else if ((len >= 105) && (len <= 135)) {
$('#symbolsDescription').text(len);
document.getElementById("statusDescription").innerHTML = "<span style='color: green'>Idealy! (105 - 135 characters)</span>";
}
else {
$('#symbolsDescription').text(len);
document.getElementById("statusDescription").innerHTML = "<span style='color: orangered'>Too much... (more then 135)</span>";
}
};

然后我在模板中使用的 HTML 代码。我使用Laravel在数据库中的文本区域中显示数据

<label for="" class="mt-4">Description</label>
<div id="statusDescription"></div>
Symbols: <div class="seocount" id="symbolsDescription"></div>
<textarea class="form-control" id="meta_description" name="meta_description" onkeyup="countDescriptionChar(this)" >
@isset ($article->meta_description)
{{ $article->meta_description}}
@endisset
</textarea>

Answer 1

查看您的代码，我添加了两件事，它们似乎符合您的期望：

• 将$(document).ready(countDescriptionChar())添加到您的 JS 代码中;

• 添加一个三元运算符，当您分配 var 时，它将查找您的参数len如果它返回为"未定义"，那么它应该查找您的<textarea>的 id 并收集它的值

  var len = val === undefined ？ document.getElementById('meta_description'(.value.length ： val.value.length

$(document).ready(countDescriptionChar())
function countDescriptionChar(val) {

var len = val === undefined ? 
document.getElementById('meta_description').value.length :
val.value.length

if ((len >= 0) && (len < 105)) {
$('#symbolsDescription').text(len);
document.getElementById("statusDescription").innerHTML = "<span style='color: orangered'>less then 105 characters</span>";
}
else if ((len >= 105) && (len <= 135)) {
$('#symbolsDescription').text(len);
document.getElementById("statusDescription").innerHTML = "<span style='color: green'>Idealy! (105 - 135 characters)</span>";
}
else {
$('#symbolsDescription').text(len);
document.getElementById("statusDescription").innerHTML = "<span style='color: orangered'>Too much... (more then 135)</span>";
}
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="" class="mt-4">Description</label>
<div id="statusDescription"></div>
Symbols: <div class="seocount" id="symbolsDescription"></div>
<textarea class="form-control" id="meta_description" name="meta_description" onkeyup="countDescriptionChar(this)" >
@isset ($article->meta_description)
{{ $article->meta_description}}
@endisset
</textarea>