通过按钮输入文本框?

时间:2016-07-25 09:38:58

标签: javascript html keyboard

我正在尝试制作一个键盘,以便我可以单击与键盘上每个字母对应的网页上的按钮,然后将这些字母显示在文本框中!我确信这很简单,我实际上在大学做了类似的事情,但我记不起来了,无法访问我的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键盘的任何东西,只有关于计算器。

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

4 个答案:

答案 0 :(得分:1)

你必须定义AddDigit函数。

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

这是工作示例

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

答案 1 :(得分:0)

您可以做的第一件事是删除<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的文本字段当前值的末尾。
如果我理解正确,这应该是解决方案。

答案 2 :(得分:0)

您可以使用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);

答案 3 :(得分:0)

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/