Question

我正在为我的Chrome扩展程序选项页面工作，用户可以在页面上定义键盘导航键。所以我在弹出页面添加了一个文本“输入”，用户可以在其中设置他们想要的密钥。目前，我的功能检测到密钥，转换为密钥代码并将其写入隐藏的“跨度”。我在本地保存了“span”的值，并在我的内容脚本中将其绑定到函数。

以下代码仅适用于1个输入，非常适合我。

popup.html

<div id="keys-tab">
<input type="text" size="10" maxlength="1" id="theKey" /><span id="response" hidden=""></span>Key 1
</div>

popup.js

if (window.addEventListener)
  window.addEventListener("load", keycodes, false);
else if (window.attachEvent)
  window.attachEvent("onload", keycodes);

function keycodes() {
  var tb = document.getElementById('theKey');
  var respText = document.getElementById('response');
  respText.innerHTML = '';

  function getKeyCode(event) {
    event = event || window.event;
    return event.keyCode;
  }

  function resetInput() {
    tb.onkeypress = function() {
      return false;
    }
  }
  tb.onkeydown = function(event) {
    var charCode = getKeyCode(event);
    respText.innerHTML = charCode;
    tb.value = String.fromCharCode(charCode);
    switch (charCode) {
      case 8:
        tb.value = "Backspace";
        break;
    }
    return false;
  }
}

但是现在我想添加一堆它们，以便用户可以为不同的操作定义不同的键。我的页面现在看起来像这样。我希望每个“输入”都这样做。

new_popup.html

<div id="keys-tab">
   <input type="text" size="10" maxlength="1" id="theKey_1" /><span id="response_1" hidden=""></span>Key 1<br />
   <input type="text" size="10" maxlength="1" id="theKey_2" /><span id="response_2" hidden=""></span>Key 2<br />
   <input type="text" size="10" maxlength="1" id="theKey_3" /><span id="response_3" hidden=""></span>Key 3
</div>

我知道我可以使用“这个”并且我自己尝试了，但无法让它工作。我希望你能帮助我。

Answer 1

以下代码将为您工作，我们只需要在变量 actionCount -：

中传递操作数

popup.html

<div id="keys-tab">
</div>

popup.js

for(var i=0;i<5;i++){
  var input = document.createElement("INPUT");
  input.type = "text";
  input.size = 10;
  input.maxlength = "text";
  input.id = "theKey_"+i;
  var span = document.createElement("SPAN");
  span.id = "response_"+i;
  span.hidden = "";
  var text = document.createElement("SPAN");
  text.innerHTML = "Key "+(i+1);
  text.style.display = 'inline-block';
  input.appendChild(span);
  document.getElementById("keys-tab").appendChild(input);
  document.getElementById("keys-tab").appendChild(text);
  document.getElementById("keys-tab").appendChild(document.createElement("BR"));
  if (window.addEventListener) window.addEventListener("load", keycodes("theKey_"+i,"response_"+i), false);
  else if (window.attachEvent) window.attachEvent("onload", keycodes("theKey_"+i,"response_"+i));

}
function keycodes(keyid,responseid) {
  var tb = document.getElementById(keyid);
  console.log(tb);
  var respText = document.getElementById(responseid);
  console.log(respText);
  respText.innerHTML = "";

  function getKeyCode(event) {
    event = event || window.event;
    return event.keyCode;
  }
  function resetInput() {
    tb.onkeypress = function() {
      return false;
    };
  }
  tb.onkeydown = function(event) {
    var charCode = getKeyCode(event);
    respText.innerHTML = charCode;
    tb.value = String.fromCharCode(charCode);
    switch (charCode) {
      case 8:
        tb.value = "Backspace";
        break;
    }
    return false;
  };
}

使单个函数适用于多个元素

1 个答案: