Question

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

此默认文字的长度可能会发生变化（人们可以从网址导入自己的标题/元描述，因此我无法在代码中使用固定长度。）

有没有办法使用＆＃34; document.onload＆＃34;来计算textarea的内容？我找到了各种讨论它的主题，但由于我是JS的超级初学者，我还没有设法让代码适应我自己的情况： - /

谢谢，如果你能提供帮助！

在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

计算textarea onload中的字符数

1 个答案: