Сделать одну функцию работающей для нескольких элементов - PullRequest
Новая
       9

Сделать одну функцию работающей для нескольких элементов

0 голосов
/ 26 апреля 2018

Я работаю над страницей опций для моего расширения Chrome, где пользователь может определить ключ для навигации по клавиатуре на странице. Поэтому я добавил текст «вход» на мою всплывающую страницу, где пользователь может установить ключ, который он хочет. В данный момент моя функция обнаруживает ключ, переводит его в код ключа и записывает его в скрытый «промежуток». Я сохраняю значение этого «span» локально и получаю его в своем скрипте контента для привязки ключа к функции.

Следующий код прекрасно работает для меня только с одним вводом.

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>

Я знаю, что могу работать с "этим", и я попробовал это сам, но не могу заставить его работать. Я надеюсь, что вы можете помочь мне с этим.

1 Ответ

0 голосов
/ 03 июля 2018

Следующий код будет работать для вас, нам просто нужно передать количество действий в переменной 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;
  };
}
...