Inputting into a text box via buttons?

Question

I'm trying to make a keyboard thing so that I can click the buttons on a webpage corresponding to each letter on the keyboard and then have those letters appear in a text box! I'm sure this is really simple and I actually did something similar in university but I can't remember it and have no access to my uni files!

Basically what I have is this:

    <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>

I removed all the other lines of code just to reduce space but you get the idea of how I'm doing it. I tried adding the < input type="button" > things for two of the letters but I have no idea if I'm on the right track because it's really difficult to find anything regarding html/java keyboards, only about calculators.

This is literally just for my boyfriend so that, as soon as this is working I can change the value of different letters to things like Morse code because he's interested in stuff like that and I'm interested in stuff like this, even if I do suck.

Answer 1

you have to define AddDigit function.

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

here is working example

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

Answer 2

The first thing you can do is remove the <form> tags, since you don't transfer data to a different page.
You have already defined that AddDigit(x) gets called on click of a button, that's good so far.
A function like AddDigitwill also require a target so we need to set an ID on the text field:
<input type="text" name="Input" id="textField">
Now we just need to define 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) takes one parameter and adds it to the end of the current value of the text field with the ID of textField.
If i understood you correctly, this should be the solution.

Answer 3

You can have a JS Function where you get the values of the buttons and append them to the text box but make sure that your buttons have IDs.

But first of all, you need to assign IDs to your buttons.

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

AddDigit(digit) JS Function

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 function

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

Here is a working fiddle https://jsfiddle.net/flyinggambit/wh2dtwxd/

I noticed that you have an unclosed form tag, is it missed or intentional ?, either way its not needed.

The basic logic is to keep a reference to button char in some attribute, in my code its kept as value

value="Q".

Then the next step would be to call a common function on button's click and pass the button reference, we achieve this by

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

Now we want to get the textbox reference, the easiest way is to attach an id to the textfield

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

Then in the function, we can get it by document.getElementById

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

Now that we have all the references we can update the textbox value

myTextBox.value += clickedBtn.value;

Also you can simulate backspace key on text input field

Hope this helps

Update:

To enter a different value, we will have to modify the code slightly

Instead of keeping the char reference in value="Q", we will need to keep it in some other attribute, so I decided to use a custom attribute called morse="A"

In the JS function, we will need to change the last line Instead of fetching data from "value" attribute, we have to get it from "morse" attribute

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

Here is another fiddle https://jsfiddle.net/flyinggambit/wh2dtwxd/1/