How to add character to textArea on keypress?

Question

I'm trying to make a simple script. When a user presses a certain key, a character will be added to the value of a textarea. For example (this isn't my case), say the user presses the Alt + Enter keys. When they do so, I'd like to add a character onto the already existing text in the text field.

So, my code would be:

function doc_keyUp(e) {
 if (e.altKey && e.keyCode == 13) {

 *insert character into textarea*

   }
}
document.addEventListener('keyup', doc_keyUp, false);

The code itself works fine- however, I'm unsure about how to insert the character. Any help is appreciated!

Just for reference, I'm attempting to create a simple phonetic keyboard for Ukrainian. You can type an English letter, and the Ukrainian counterpart shows up. Look at http://ua.translit.cc to better understand what I'm saying.

Similar http://stackoverflow.com/questions/1642447/how-to-change-the-content-of-a-textarea-with-javascript — GramThanos, Oct 19 '16 at 00:04

BrTkCa · Accepted Answer · 2016-10-19T14:08:12.290

2

function doc_keyUp(e) {
 if (e.altKey && e.keyCode == 13 || e.keyCode == 65) {
    document.getElementById("area").value += "123";
   }
}

function validateKey(e){
  // here can be whatever keys
   if (e.keyCode >= 65 && e.keyCode <= 90 || e.keyCode >= 97 && e.keyCode <= 122) return false;
}

document.addEventListener('keyup', doc_keyUp, false);

<textarea id="area" onKeyPress="return validateKey(event)">ABC</textarea>

Updated to validate some key in the entry of textarea.

edited Oct 19 '16 at 14:08

answered Oct 19 '16 at 00:20

BrTkCa

4,703
3
24
45

Thanks! Works like a charm. However, is there any way to remove the key pressed? (I didn't articulate that thought well, sorry). For example, if you change the keycode to '65' (a), and type in the textarea, it types an A first, then the 123. Is there any way to change that? – Oct 19 '16 at 11:13
"is there any way to remove the key pressed?" Yes, then textare works in normal way. "if you change the keycode to '65' (a), and type in the textarea, it types an A first, then the 123." I don't understand. – BrTkCa Oct 19 '16 at 11:50
So, say my keypress is "65", which is the letter "a". When I select the textarea, and press "a", it types in "a", and then "123". How do I get rid of the "a" that was typed into the textarea? In other words, how do I remove the "a" from the textarea value? – Oct 19 '16 at 12:55
I updated the answer. In onKeyPress it's possible to validate the entry key. Example, say it's keypress is "65", the value "a" not will be included. – BrTkCa Oct 19 '16 at 13:09
Hi- could you change that to if (e.keyCode >= 65 && e.keyCode <= 90 || e.keyCode >= 97 && e.keyCode <= 122) return false; – Oct 19 '16 at 14:06
Basically, it blocks all lowercase and uppercase letters, which allows me to replace them. As soon as you change that, I'll accept your answer – Oct 19 '16 at 14:06

score 1 · Answer 2 · answered Oct 19 '16 at 00:16

1

You can just add the text to the value of the textarea.

function doc_keyUp(e) {
    if (e.altKey && e.keyCode == 13) {
        textarea.text += value
    }
}
document.addEventListener('keyup', doc_keyUp, false);

answered Oct 19 '16 at 00:16

Rohan Rao

112
2
5

Hi- this works perfectly, thanks. However, when I changed the keycode to a letter (I used 65:a), I ran into an issue. It types an "a" first, and then the added value. Is there anyway to **not** type the key pressed? – Oct 19 '16 at 11:14
@Dave_Williams You're welcome! You can use `e.preventDefault()` at the end of your function to prevent the regular typing behavior. – Rohan Rao Oct 19 '16 at 23:58

How to add character to textArea on keypress?

2 Answers2