javascript - onload 计算文本区域中的字符数

Question

我正在尝试创建一个简单的工具来计算标题/元描述的长度。我设法创建了字符计数器(没有 jQuery)。但是，在页面加载时，每个文本区域中都会输入一个默认文本，我希望将其包含在计数中。

此默认文本的长度可能会更改(人们将能够从 URL 导入自己的标题/元描述，因此我无法在代码中使用固定长度)。

有没有办法使用“document.onload”来计算文本区域的内容？我发现了各种讨论它的主题，但由于我是 JS 的 super 初学者，所以我还没有设法使代码适应我自己的情况:-/

如果您能提供帮助，谢谢!

Codepen 预览:https://codepen.io/pen/OzagNQ

这是 HTML 部分:

<label for="titletag">Title</label><br>
<div class="wrap">
<textarea name="text" id="titletag" cols="100" rows="1" oninput="count_title('titletag','ctitle')">Default title (variable length).</textarea><span id="ctitle" class="counter"></span></div><br><br>

<label for="metadesc">Meta description</label><br>
<div class="wrap">
<textarea name="metadesc" cols="100" rows="5" oninput="count_mdesc()" id="metadesc">Default meta description (variable length).</textarea><span id="cmdesc" class="counter"></span></div>

还有 JS 部分:

window.load = function() {
   count_title(document.getElementById('titletag'), document.getElementById('ctitle'));
 }

 function count_title() {
   var el_t = document.getElementById('titletag');
   var length = 70;
   var el_c = document.getElementById('ctitle');
   el_c.innerHTML = length;
   el_t.oninput = function() {
     document.getElementById('ctitle').innerHTML = (length - this.value.length);
   };
 }

 function count_mdesc() {
   var el_t = document.getElementById('metadesc');
   var length = 320;
   var el_c = document.getElementById('cmdesc');
   el_c.innerHTML = length;
   el_t.oninput = function() {
     document.getElementById('cmdesc').innerHTML = (length - this.value.length);
   };
 }

 function pageRefresh() {
   count_title();
   count_mdesc();
 }

 window.onload = function() {
   pageRefresh();
 }

Answer 1

您可以使用 el_t.value.length 获取 oninput 函数之外每个元素的长度:

function count_title() {
  var el_t = document.getElementById("titletag");
  var maxLength = 70;
  var el_c = document.getElementById("ctitle");
  el_c.innerHTML = maxLength - el_t.value.length;
  el_t.oninput = function() {
    document.getElementById("ctitle").innerHTML = maxLength - this.value.length;
  };
}
function count_mdesc() {
  var el_t = document.getElementById("metadesc");
  var maxLength = 320;
  var el_c = document.getElementById("cmdesc");
  el_c.innerHTML = maxLength - el_t.value.length;
  el_t.oninput = function() {
    document.getElementById("cmdesc").innerHTML = maxLength - this.value.length;
  };
}
function pageRefresh() {
  count_title();
  count_mdesc();
}

window.onload = function() {
  pageRefresh();
};

https://codepen.io/anon/pen/KZreOx

您可能还需要考虑将这两个函数重构为单个函数，以使您的代码更易于维护:

function count_element(tag, ctag, maxLength) {
  var el_t = document.getElementById(tag);
  var el_c = document.getElementById(ctag);
  el_c.innerHTML = maxLength - el_t.value.length;
  el_t.oninput = function() {
    document.getElementById(ctag).innerHTML = maxLength - this.value.length;
  };
}

function pageRefresh() {
  count_element("titletag", "ctitle", 70);
  count_element("metadesc", "cmdesc", 320);
}

window.onload = function() {
  pageRefresh();
};

https://codepen.io/anon/pen/dJQqjg