Question

我有两个这样的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;
}

所以因为我有两个输入标签，所以我需要另一个pass2输入的js代码，例如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;
}

此代码可以正常工作。在浏览器控制台中输入pswd1和pswd2的输入标签和console.log后，我得到了很好的结果。

在我的项目中，onkeyup处理程序并不像我在发布的代码中所写的那样简单，实际上它要复杂得多。另外，此代码应适用于我项目中的每个文本/密码输入标签，适用于许多其他文件。因此，为了使代码正确且易于维护，我尝试将js代码制作在通用js文件中并在需要时加载。

问题是如何区分common.js文件代码中的两个变量pswd1和pswd2。所以我想到了评估命令。所以我的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”，那么我在获得pswd1的浏览器控制台中显示console.log一个空字符串，对于pswd2，我得到字符串“ kkklll”。

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

有一个解决方法吗？有没有更好的主意来实现我的目标？

Answer 1

由于id是唯一的，为什么不使用每个input的id作为变量名（或作为对象键），然后像这样重复使用相同的代码段< / p>

堆栈代码段-使用变量

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>

js：加载具有不同参数的相同js代码

1 个答案: