一 … Two fuctions … javascript virtualkeyboard

问题描述 投票：0回答：1

我需要帮助我的虚拟键盘，在我的键盘上有一个DIV，我用来使按钮值=“MAG”工作在JavaScript，但我使用相同的DIV使键盘工作和写，但使用一个Div与同样的id =“Div1”对我来说不起作用......所以我必须选择（（使用键盘书写......或者将键盘从MAG更改为MIN））不是两个都!! ....这是我的代码，你可以看到你只能使用键盘写，但你不能使用MAG按钮....我很抱歉我的英语不好...

<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;}
*{margin:0;padding:0;}</style>
<script>
(function() {
   'use strict';
   var i,c;
function init(){ 
/* get all the input elements within the div whose id is "keyboard */
   i=document.getElementById('Div1').getElementsByTagName('input'); 
/* loop through all the elements */   
for(c=0;c<i.length;c++) {
/* find all the the input type="button" elements */
if(i[c].type==='button') { 
 /* add an onclick handler to each of them  and set the function to call */
   i[c].addEventListener('onclick',makeClickHandler(c));
   }
  }

/* this is the type="reset" input */
document.getElementById('clear').onclick=function() {
/* remove all the characters from the input type="text" element */
   document.getElementById('text').value='';
  }
 }

function makeClickHandler(c) {
   i[c].onclick=function() {
/* find the non-text button  which has an id */
if(i[c].id==='back') {
/* remove last character from the input the type="text" element using regular expression */
   document.getElementById('text').value=
   document.getElementById('text').value.replace(/.$/,'');
 }
/* find the text buttons */
else {
/* add characters to the input type="text" element */
   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">
</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 id="Button1" value="MAG." type="button"  onclick="switchVisible();">
<input value=" " type="button">
<input id="Button1" 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">
</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="disalbed" value="" type="button">
</div><div>
<input id="Button1" value="Min." type="button" onclick="switchVisible();">
<input value=" " type="button">
<input id="Button1" value="Min." type="button" onclick="switchVisible();">
</div></div></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 !== undefined && div2 !== undefined) {
    	  div1.style.display = div2.style.display === '' ? 'none' : div2.style.display === 'none' ? 'none' : 'block';
    	  div2.style.display = div1.style.display === 'block' ? 'none' : 'block';
      }
    }
</script>
</body>
</html>
javascript html keyboard virtual-keyboard
1个回答
0
投票

有一些问题需要解决：

大部分问题：

  • 控制台JS错误 - 没有ID为“清除”的按钮。
  • 我没有看到ID为“后退”的按钮 我猜这是“Borrar”按钮，但它没有ID。 它还需要被下一点讨论的init函数中的循环跳过。
  • 有4个<input id="Button1"...： ID必须是唯一的。 但是这些按钮确实需要一个类或id来阻止makeClickHandler附加onclick函数并覆盖内联onclick定义。 /* find all the the input type="button" elements */ if(i[c].type==='button' && (i[c].id !== "Button1" || i[c].id !== "back")) { /* add an onclick handler to each of them and set the function to call */ i[c].addEventListener('onclick',makeClickHandler(c)); }

小问题：

  • 将IIFE script中的<head>移动到页面底部;那么你不需要为“onload”添加一个事件监听器。
  • 代码几乎不可读。请正确使用缩进并保持一致！
  • 有一个拼写错误的输入 - disabled="disalbed"
  • 按照惯例，元素id不应以大写字母开头。
  • 避免使用onclick或任何内联JavaScript。这被称为separation of concerns。
  • 刷新/了解event delegation;它会使代码更清晰。
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.