js: загрузить тот же js-код с разными параметрами - PullRequest
Новая
       7

js: загрузить тот же js-код с разными параметрами

0 голосов
/ 25 июня 2018

У меня есть два html-тега для паролей: 

<input maxlength="30" size="20" id="pass1" name="password" autocomplete="off" type="password">
<input maxlength="30" size="20" id="pass2" name="password" autocomplete="off" type="password">

Моя цель - сделать несколько обработок при записи в каждый вход.Поэтому я выбираю onkeyup.Просто чтобы прояснить мою проблему, я могу уменьшить свой js-код до следующего: 

var pass_input;
var pswd1="";
pass_input=document.getElementById("pass1");
pass_input.onkeyup = function(event) {
    pswd1=pswd1+event.key;
}

, так как у меня есть два входных тега, поэтому мне нужен другой js-код для ввода pass2, такой как pass1, поэтому мой код будетбыть: 

var pass_input;
var pswd1="";
pass_input=document.getElementById("pass1");
pass_input.onkeyup = function(event) {
    pswd1=pswd1+event.key;
}

var pswd2="";
pass_input=document.getElementById("pass2");
pass_input.onkeyup = function(event) {
    pswd2=pswd2+event.key;
}

этот код работает нормально.После записи в теги ввода и console.log pswd1 и pswd2 в консоли браузера я получил хорошие результаты.

В моем проекте обработчик onkeyup не такой простой, как то, что я пишу в опубликованном коде, на самом деле этоболее сложныйКроме того, этот код должен быть для каждого тега ввода текста / пароля в моем проекте, а также во многих других файлах.Поэтому, чтобы сделать код правильным и легким для обслуживания, я попытался сделать код js в общем файле js и загружать его, когда мне нужно.

Вопрос состоит в том, как различать переменные буксировки pswd1 и pswd2 в общемКод файла .js.Вот я и подумал о команде eval.Таким образом, мое содержимое файла common.js: 

pass_input.onkeyup = function(event) {
    eval(pass_var_name+"="+pass_var_name+"+event.key");
}

, а содержимое моего html-файла: 

<input maxlength="30" size="20" id="pass1" name="password" autocomplete="off" type="password">
<input maxlength="30" size="20" id="pass2" name="password" autocomplete="off" type="password">

<script>
    var pass_input;
    var pswd1, pswd2;
    pass_input=document.getElementById("pass1");
    pass_var_name="pswd1";
</script>
<script src="common.js"></script>
<script>
    pass_input=document.getElementById("pass2");
    pass_var_name="pswd2";
</script>
<script src="common.js"></script>

, но если я выполняю свой код и пытаюсь писать в каждом входе, дляНапример, в pass1 я пишу "kkk", а в pass2 я пишу "lll", затем отображаю в консоли браузера в console.log, получаю для pswd1 пустую строку, а для pswd2 я получаю строку "kkklll".

Кажется, что js интерпретирует eval в обработчике opnkeyup как раз во время нажатия клавиатуры.

Есть идея, как это исправить?Есть ли лучшая идея для достижения моей цели?

1 Ответ

0 голосов
/ 25 июня 2018

Поскольку id уникальны, почему бы не использовать каждый input идентификатор в качестве имени переменной (или в качестве ключа объекта), а затем сделать это, чтобы повторно использовать тот же фрагмент кода

Фрагмент стека - Использование переменных 

var pass1 = '', pass2 = ''; //etc.

Array.from(document.querySelectorAll('input')).forEach( function(el) {

  el.addEventListener('keyup', function(e) {
    window[this.id] += e.key;
  })  
  
})

document.querySelector('button').addEventListener('click', function() {
  console.log("pass1: " + pass1);
  console.log("pass2: " + pass2);
})
<input maxlength="30" size="20" id="pass1" name="password" autocomplete="off" type="password">
<input maxlength="30" size="20" id="pass2" name="password" autocomplete="off" type="password">

<button type="button">Show variable values with console.log</button>

Фрагмент стека - Использование объекта 

var passwords = {}

Array.from(document.querySelectorAll('input')).forEach( function(el) {

  passwords[el.id] = '';   // create/init property
  
  el.addEventListener('keyup', function(e) {
    passwords[this.id] += e.key;
  })  
  
})

document.querySelector('button').addEventListener('click', function() {
  console.log(passwords);
})
<input maxlength="30" size="20" id="pass1" name="password" autocomplete="off" type="password">
<input maxlength="30" size="20" id="pass2" name="password" autocomplete="off" type="password">

<button type="button">Show variable values with console.log</button>
...