页面加载时自动启动 JavaScript 功能

Question

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

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

1. 一些短信取决于计数

2. 字符数

问题是，该代码仅在我们至少键入一个符号时才开始。但是在我的网站中，我在这个 textarea 中有一些从数据库加载的信息，当页面加载时，所以 textarea 已经有一些符号。但是当页面加载时计数功能不会启动，正如我所说，我们需要输入（或删除）至少一个符号。

我知道，我认为我的代码应该可以正常工作，因为我使用了onkeyup事件。但是，我也尝试使用onload事件。还尝试添加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 从数据库中显示 textarea 中的数据

<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，如果它返回为“未定义”，那么它应该查找您的 id<textarea>并收集它的值var len = val === 未定义？document.getElementById('meta_description').value.length : val.value.length$(document).ready(countDescriptionChar())function countDescriptionChar(val) {&nbsp;&nbsp;&nbsp; var len = val === undefined ?&nbsp;&nbsp; &nbsp; &nbsp; document.getElementById('meta_description').value.length :&nbsp; val.value.length&nbsp;&nbsp;&nbsp; if ((len >= 0) && (len < 105)) {&nbsp; &nbsp; $('#symbolsDescription').text(len);&nbsp; &nbsp; document.getElementById("statusDescription").innerHTML = "<span style='color: orangered'>less then 105 characters</span>";&nbsp; }&nbsp; else if ((len >= 105) && (len <= 135)) {&nbsp; &nbsp; $('#symbolsDescription').text(len);&nbsp; &nbsp; document.getElementById("statusDescription").innerHTML = "<span style='color: green'>Idealy! (105 - 135 characters)</span>";&nbsp; }&nbsp; else {&nbsp; &nbsp; $('#symbolsDescription').text(len);&nbsp; &nbsp; document.getElementById("statusDescription").innerHTML = "<span style='color: orangered'>Too much... (more then 135)</span>";&nbsp; }};<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>