js:用不同的参数加载相同的js代码
js:用不同的参数加载相同的js代码
提问于 2018-06-25 02:19:37
我有两个类似的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">我的目标是在每次输入时做一些处理。所以我选择加入。为了使我的问题更清楚，我可以将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;
}这个代码很好用。在浏览器控制台中写入输入标记和console.log of pswd1和pswd2之后，我得到了很好的结果。
在我的项目中，onkeyup处理程序并不像我在发布的代码中所写的那样简单，实际上它更复杂。此外，这段代码应该适用于我的项目中的每个文本/密码输入标记，在许多其他文件中也是如此。因此，为了使代码更正确、更容易维护，我尝试将js代码放在一个公共js文件中，并在需要时加载。
问题是如何区分pswd1和pswd2在common.js文件代码中的两个变量。所以我想到了低音指令。所以我的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显示一个空字符串，而对于pswd2，则显示字符串"kkklll“。
在键盘点击的时候，js似乎会在opnkeyup处理程序中解释eval。
有什么办法纠正吗？有什么更好的办法来达到我的目标吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-25 02:49:43
既然id是唯一的，为什么不使用每个input的id作为变量名(或者作为对象键)，然后这样做来重用相同的代码片段。
堆栈片段-使用变量
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51021144
复制相关文章
相似问题
腾讯云开发者
