Question

我正在尝试制作一个键盘，以便我可以单击与键盘上每个字母对应的网页上的按钮，然后将这些字母显示在文本框中！我确信这很简单，我实际上在大学做了类似的事情，但我记不起来了，无法访问我的uni文件！

基本上我拥有的是：

    <div align="center">

    <form name="keyboard">

    <table>
     <tr>
      <td><input type="text" name="Input"></td>
     </tr>
    </table>
    <table>
     <tr>
      <td><input type="button" value="Q" name="keyQ" onClick="AddDigit('Q')"></td>
      <td><input type="button" value="W" name="keyW" onClick="AddDigit('W')"></td>
      <td><button>E</button></td>
      <td><button>R</button></td>
      <td><button>T</button></td>
      <td><button>Y</button></td>
      <td><button>U</button></td>  
      <td><button>I</button></td>
      <td><button>O</button></td>
      <td><button>P</button></td>
     </tr>
    </table></div>

我删除了所有其他代码行只是为了减少空间，但你知道我是怎么做的。我尝试添加＆lt; input type =“button”＆gt;两个字母的东西，但我不知道我是否在正确的轨道上，因为很难找到关于html / java键盘的任何东西，只有关于计算器。

这实际上只是为了我的男朋友，所以，一旦这个工作，我可以将不同字母的价值改为摩尔斯电码这样的东西，因为他对这样的东西很感兴趣，我对这样的东西感兴趣，甚至如果我真的很糟糕

Answer 1

你必须定义AddDigit函数。

function AddDigit(digit){
    var val =document.getElementById('Input').value
    document.getElementById('Input').value=val + digit;
}

这是工作示例

https://jsfiddle.net/Shilpi/1tye1b9t/7/

Answer 2

您可以做的第一件事是删除<form>代码，因为您不会将数据传输到其他页面。
您已经定义了点击按钮时调用AddDigit(x)，到目前为止这很好像AddDigit这样的函数也需要一个目标，所以我们需要在文本字段上设置一个ID：
<input type="text" name="Input" id="textField">
现在我们只需要定义AddDigit(x)：

function AddDigit(key){
	var value = document.getElementById("textField").value;
	document.getElementById("textField").value = value + key;
	
}

    <div align="center">

    <table>
     <tr>
      <td><input type="text" name="Input" id="textField"></td>
     </tr>
    </table>
    <table>
     <tr>
      <td><input type="button" value="Q" name="keyQ" onClick="AddDigit('Q')"></td>
      <td><input type="button" value="W" name="keyW" onClick="AddDigit('W')"></td>
      <td><button>E</button></td>
      <td><button>R</button></td>
      <td><button>T</button></td>
      <td><button>Y</button></td>
      <td><button>U</button></td>  
      <td><button>I</button></td>
      <td><button>O</button></td>
      <td><button>P</button></td>
     </tr>
    </table>
    </div>

AddDigit(key)获取一个参数，并将其添加到ID为textField的文本字段当前值的末尾。
如果我理解正确，这应该是解决方案。

Answer 3

您可以使用JS函数获取按钮的值并将其附加到文本框，但要确保按钮具有ID 。

但首先，您需要为按钮分配ID。

<input type="button" value="Q" id = "keyQ" name="keyQ" onClick="AddDigit('Q')">

AddDigit（数字）JS功能

var str = document.getElementById('Input').value;    
document.getElementById('Input').setText(str + digit);

Answer 4

HTML

<table>
     <tr>
      <td>
      <input type="button" value="Q" onclick="inputChar(this)"/>
      <input type="button" value="W" onclick="inputChar(this)"/>
      <input type="button" value="E" onclick="inputChar(this)"/>
      <input type="button" value="R" onclick="inputChar(this)"/>
      <input type="button" value="T" onclick="inputChar(this)"/>
      <input type="button" value="Y" onclick="inputChar(this)"/>
      <br/>
      <input id="myTextBox" type="text" />
      </td>
      </tr>
</table>

Javascript功能

inputChar= function(clickedBtn){
  var myTextBox = document.getElementById("myTextBox");
  myTextBox.value += clickedBtn.value;
}

这是一个工作小提琴 https://jsfiddle.net/flyinggambit/wh2dtwxd/

我注意到你有一个未公开的表格标签，是错过还是故意？，无论哪种方式都不需要。

基本逻辑是在某些属性中保留对按钮char的引用，在我的代码中它保持为值

value="Q"。

然后下一步是在按钮的单击上调用一个常用功能并传递按钮参考，我们通过

实现这一目标

onclick="inputChar(this)" \\ this is the button you clicked

现在我们想要获取文本框引用，最简单的方法是将id附加到文本字段

<input id="myTextBox" type="text" />

然后在函数中，我们可以通过document.getElementById

获取它

var myTextBox = document.getElementById("myTextBox");

现在我们有了所有引用，我们可以更新文本框值

myTextBox.value += clickedBtn.value;

您也可以simulate backspace key on text input field

希望这有帮助

更新：

要输入不同的值，我们必须稍微修改代码

我们不需要在value="Q"中保留char引用，而是需要将其保留在其他属性中，因此我决定使用名为morse="A"的自定义属性

在JS函数中，我们需要更改最后一行而不是从＆＃34;值＆＃34;中获取数据。属性，我们必须从＆＃34;莫尔斯＆＃34;属性

myTextBox.value += clickedBtn.getAttribute("morse");

这是另一个小提琴https://jsfiddle.net/flyinggambit/wh2dtwxd/1/

通过按钮输入文本框？

4 个答案: