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不起作用，但它正在我的笔记本电脑上工作，否则我也会提出一个小提琴。但这不是我的问题（虽然很想知道原因）。

问题：文本框的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

问题：文本框的id是= taMessage但是如果我更改了id to = ta-Message，添加连字符，脚本停止工作。

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

全局密钥已添加到window对象，当您执行onkeyup="CheckFieldLength(taMessage,...);"时，值taMessage实际为window.taMessage，也可以window["taMessage"]进行访问。< / p>

hypen -作为id有效，但在Javascript中不是有效的变量名称，它也不能用.符号来访问密钥。但是，keys对象支持连字符，因此在您的情况下，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绑定事件。

Answer 2

这种情况可能会this关键字有所帮助，例如

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

您可以在HTML代码中传递this.id或this.name您使用的任何属性。

我希望这个简单的技巧可以帮助你。

Answer 3

您无法在元素ID或名称中传递空格字符。您也可以使用此来获取此类

的当前文本框

onkeydown="CheckFieldLength(this, 'charcount', 'remaining', 20);"

你也可以将id name作为字符串传递，你的函数代码就像这样

 function CheckFieldLength(fn,wn,rn,mc) { fn = window[fn];}

它可以通过id找到元素

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

3 个答案: