代码之家 › 专栏 › 技术社区 › Kallel Omar

JS:用不同的参数加载相同的JS代码

script-tag onkeyup html5 html javascript

3

Kallel Omar · 技术社区 · 7 年前

<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">

我的目标是在每次输入时进行一些处理。所以我选择打开键。

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

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;
}

问题是如何在common.js文件代码中区分两个变量pswd1和pswd2。所以我想到了疏散指挥部。所以我的common.js文件内容是:

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

<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>

似乎JS只是在键盘点击时解释opnkeyup处理程序中的eval。

1 回复 | 直到 7 年前

1

2

Asons Oliver Joseph Ash 7 年前

作为 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);
})