虚拟键盘DIV冲突求助：无法同时实现输入与MAG/MIN模式切换

嘿，我看了你的代码，问题主要出在事件绑定冲突、重复ID和模式切换逻辑错误这三个地方，导致MAG按钮和键盘输入不能同时工作。下面一步步帮你修复：

1. 事件绑定覆盖了MAG按钮的原有点击事件 #

你的init函数里有两个关键错误：

• addEventListener的事件名应该是'click'，而不是'onclick'
• 随后你直接给按钮的onclick属性赋值，这会完全覆盖MAG按钮原本绑定的switchVisible()函数

修复方法：修改事件绑定逻辑，避免覆盖原有事件，同时跳过模式切换按钮的输入处理：

function init(){
  i = document.getElementById('Div1').getElementsByTagName('input');
  for(c=0; c<i.length; c++) {
    if(i[c].type === 'button') {
      // 用正确的click事件名添加监听
      i[c].addEventListener('click', makeClickHandler(c));
    }
  }
}

function makeClickHandler(c) {
  return function() {
    // 跳过MAG/Min按钮，让它执行原本的模式切换逻辑
    if(this.value === 'MAG.' || this.value === 'Min.') return;
    
    // 保留原有输入逻辑
    if(this.id === 'back') {
      document.getElementById('text').value = document.getElementById('text').value.replace(/.$/,'');
    } else {
      document.getElementById('text').value += this.value.toLowerCase();
    }
  };
}

2. 重复的ID属性 #

HTML里多个按钮用了id="Button1"，ID在页面中必须唯一，这会导致DOM元素识别异常。把重复ID改成类名：

<!-- Div1里的MAG按钮 -->
<input class="mode-switch" value="MAG." type="button" onclick="switchVisible();">
<input value=" " type="button">
<input class="mode-switch" value="MAG." type="button" onclick="switchVisible();">

<!-- Div2里的Min按钮 -->
<input class="mode-switch" value="Min." type="button" onclick="switchVisible();">
<input value=" " type="button">
<input class="mode-switch" value="Min." type="button" onclick="switchVisible();">

3. switchVisible函数逻辑错误 #

原函数的判断逻辑混乱，导致Div1和Div2的切换不正常。简化成清晰的状态切换：

function switchVisible() {
  const div1 = document.getElementById('Div1');
  const div2 = document.getElementById('Div2');
  
  if (div1 && div2) {
    // 直接切换两者的显示状态
    div1.style.display = div1.style.display === 'none' ? 'block' : 'none';
    div2.style.display = div2.style.display === 'none' ? 'block' : 'none';
  }
}

完整修复后的代码 #

整合以上修改后，代码就能同时实现键盘输入和模式切换功能了：

<html>
<head>
<style type="text/css">
#Div1{ display: block; }
#Div2 { display: none; }
.divs { width: 50px; height: 50px; border: 1px solid #000; }
</style>
<style type="text/css">*{margin:0;padding:0;}</style>
<script>
(function() {
'use strict';
var i,c;
function init(){
i=document.getElementById('Div1').getElementsByTagName('input');
for(c=0;c<i.length;c++) {
if(i[c].type==='button') {
i[c].addEventListener('click',makeClickHandler(c));
}
}
}
function makeClickHandler(c) {
return function() {
if(this.value === 'MAG.' || this.value === 'Min.') return;
if(this.id==='back') {
document.getElementById('text').value= document.getElementById('text').value.replace(/.$/,'');
}
else {
document.getElementById('text').value+=this.value.toLowerCase();
}
};
}
window.addEventListener? window.addEventListener('load',init,false): window.attachEvent('onload',init);
})();
</script>
</head>
<body>
<div id="Div1">
<div>
<input value="1" type="button">
<input value="2" type="button">
<input value="3" type="button">
<input value="4" type="button">
<input value="5" type="button">
<input value="6" type="button">
<input value="7" type="button">
<input value="8" type="button">
<input value="9" type="button">
<input value="0" type="button">
<input value="Borrar" type="button" id="back">
</div><div>
<input value="q" type="button">
<input value="w" type="button">
<input value="e" type="button">
<input value="r" type="button">
<input value="t" type="button">
<input value="y" type="button">
<input value="u" type="button">
<input value="i" type="button">
<input value="o" type="button">
<input value="p" type="button">
<input value="`" type="button">
<input value="+" type="button">
</div><div><input value="a" type="button">
<input value="s" type="button">
<input value="d" type="button">
<input value="f" type="button">
<input value="g" type="button">
<input value="h" type="button">
<input value="j" type="button">
<input value="k" type="button">
<input value="l" type="button">
<input value="ñ" type="button">
<input value="´" type="button">
<input value="ç" type="button">
</div><div>
<input value="&lt;" type="button">
<input value="z" type="button">
<input value="x" type="button">
<input value="c" type="button">
<input value="v" type="button">
<input value="b" type="button">
<input value="n" type="button">
<input value="m" type="button">
<input value="+" type="button">
<input value="." type="button">
<input value="-" type="button">
<input disabled="disabled" value=" " type="button">
</div><div>
<input class="mode-switch" value="MAG." type="button" onclick="switchVisible();">
<input value=" " type="button">
<input class="mode-switch" value="MAG." type="button" onclick="switchVisible();">
</div></div>
<div id="Div2" style="display:none" class="keyboard"><div>
<input value="!" type="button">
<input value="&quot;" type="button">
<input value="·" type="button">
<input value="$" type="button">
<input value="%" type="button">
<input value="&amp;" type="button">
<input value="/" type="button">
<input value="(" type="button">
<input value=")" type="button">
<input value="=" type="button">
<input value="Borrar" type="button" id="back">
</div><div>
<input value="Q" type="button">
<input value="W" type="button">
<input value="E" type="button">
<input value="R" type="button">
<input value="T" type="button">
<input value="Y" type="button">
<input value="U" type="button">
<input value="I" type="button">
<input value="O" type="button">
<input value="P" type="button">
<input value="^" type="button">
<input value="*" type="button">
</div><div>
<input value="A" type="button">
<input value="S" type="button">
<input value="D" type="button">
<input value="F" type="button">
<input value="G" type="button">
<input value="H" type="button">
<input value="J" type="button">
<input value="K" type="button">
<input value="L" type="button">
<input value="Ñ" type="button">
<input value="¨" type="button">
<input value="Ç" type="button">
</div><div>
<input value="&gt;" type="button">
<input value="Z" type="button">
<input value="X" type="button">
<input value="C" type="button">
<input value="V" type="button">
<input value="B" type="button">
<input value="N" type="button">
<input value="M" type="button">
<input value=";" type="button">
<input value=":" type="button">
<input value="_" type="button">
<input disabled="disabled" value="" type="button">
</div><div>
<input class="mode-switch" value="Min." type="button" onclick="switchVisible();">
<input value=" " type="button">
<input class="mode-switch" value="Min." type="button" onclick="switchVisible();">
</div></div>
<div>
<label>Track Search</label> - <input id="text" type="text" readonly="readonly">
</div>
<script type="text/javascript">
function switchVisible() {
var div1=document.getElementById('Div1');
var div2=document.getElementById('Div2');
if (div1 && div2) {
div1.style.display = div1.style.display === 'none' ? 'block' : 'none';
div2.style.display = div2.style.display === 'none' ? 'block' : 'none';
}
}
</script>
</body>
</html>

额外小修正 #

• 给Borrar按钮加上了id="back"，让退格功能正常工作
• 修正了Div2里的disabled拼写错误（原先是disalbed）

内容的提问来源于stack exchange，提问作者Anas Arsalane