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

Question

我的 JavaScript 代码有一些问题，您可以在下面看到。因此，当用户键入内容时，代码会计算某些文本区域中的字符并实时计算。根据符号计数，用户有两个信息：一些短信取决于计数字符数问题是，该代码仅在我们至少键入一个符号时才开始。但是在我的网站中，我在这个 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) {

  

  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>