通过按钮输入文本框？

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>

我删除了所有其他代码行只是为了减少空间，但你知道我是如何做的。我尝试为两个字母添加<input type =“button”>的东西，但我不知道我是否在正确的轨道上，因为很难找到关于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函数中，我们需要更改最后一行而不是从“value”属性中获取数据，我们必须从“morse”属性中获取它

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

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