javascript - 为什么带有连字符 (-) 的 id 选择器不适用于 javascript

Question

我是 javascript 的新手，才刚刚开始学习。这里我有一个计算字符数的 javascript。

Javascript

function CheckFieldLength(fn,wn,rn,mc) {
  var len = fn.value.length;
  if (len > mc) {
    fn.value = fn.value.substring(0,mc);
    len = mc;
  }
  document.getElementById(wn).innerHTML = len;
  document.getElementById(rn).innerHTML = mc - len;
}

和HTML

<textarea name="taMessage" id="taMessage" cols="40" rows="5" onkeyup="CheckFieldLength(taMessage, 'charcount', 'remaining', 20);" onkeydown="CheckFieldLength(taMessage, 'charcount', 'remaining', 20);" onmouseout="CheckFieldLength(taMessage, 'charcount', 'remaining', 20);"></textarea>
<br>
<small><span id="charcount">0</span> characters entered.   |   <span id="remaining">20</span> characters remaining.</small><br>

出于某种原因，这在 JsFiddle 上不起作用，但它在我的笔记本电脑上工作，否则我也会放一个 fiddle 。但这不是我的问题(虽然很想知道为什么)。

问题: 文本框的 id 是 = taMessage 但如果我将 id 更改为 = ta-Message，添加一个连字符，脚本停止工作。用下面的脚本替换上面的 html 脚本会停止 javascript，唯一的区别是连字符。为什么？

<textarea name="taMessage" id="ta-Message" cols="40" rows="5" onkeyup="CheckFieldLength(ta-Message, 'charcount', 'remaining', 20);" onkeydown="CheckFieldLength(ta-Message, 'charcount', 'remaining', 20);" onmouseout="CheckFieldLength(ta-Message, 'charcount', 'remaining', 20);"></textarea>

Answer 1

Problem: The id of the textbox is = taMessage but if I change the id to = ta-Message, adding a hyphen, the scripts stops working.

因为连字符在 Javascript 的变量名中无效。

全局键被添加到 window 对象，当你执行 onkeyup="CheckFieldLength(taMessage,...);" 值 taMessage 实际上是 window.taMessage，也可以作为 window["taMessage"] 访问。

hypen- 作为 id 有效，但在 Javascript 中不是有效的变量名，它也不适用于 . 表示法来访问键。但是支持连字符作为对象的 key，因此在您的情况下 key 是 fa-Message。您可以将括号表示法与父级 window 一起使用，以访问这样的带连字符的键 window['ta-Message']

onkeyup="CheckFieldLength(ta-Message, 'charcount', 'remaining', 20);//Wrong
onkeyup="CheckFieldLength(window.ta-Message, 'charcount', 'remaining', 20);//Wrong
onkeyup="CheckFieldLength(window['ta-Message'], 'charcount', 'remaining', 20);//works

function log(node){
    console.log("node", node);
}

<textarea id="hyphenated-id" onclick="log(window['hyphenated-id'])"></textarea>

如其他评论所述，在您的场景中使用 this 是更好的选择

function log(node){
    console.log("node", node);
}

<textarea id="hyphenated-id" onclick="log(this)"></textarea>

更好的是使用EventListeners绑定(bind)事件。