CODEWITHSUNDEEP
javascripthtml
stylusss
stylusss

Reputation: 79

Using javascript, button click triggers enter click inside textarea

how can I create a button that when clicked, it simulates ENTER as if it were physically pressed on the keyboard.

In other words, this button when clicked simulates the ENTER button inside the text area, where text is being written.

For instance, after the button is clicked,

Original text area text:

XXX XXX XXX

Becomes

New text area text:

XXX XXX XXX

New line

All of this is simulated via a button click.

Let's assume the text area has an ID of #QR

Strictly javascript, no jquery

Upvotes: 0

Views: 1189

Answers (2)

Zahid Saeed
Zahid Saeed

Reputation: 1181

It's pretty easy though. All you have to do is add an event listener on the button like so:

HTML Code:

<textarea id="text_area"></textarea>
<button type="button" id="new_line">Click Me!</button>

JS Code

var textarea = document.getElementById("text_area"),
    myBtn    = document.getElementById("new_line");

myBtn.addEventListener("click", function(){
    textarea.value += "\r\n";
    textarea.focus(); // This is optional, if you want the user to go back into the textarea. This will be good then :)

}, false);

Note that i have declared the variables outside of the function such that on each button click, you don't have to jump into the DOM to look for the textarea over & over again.

Hope that helps :-)

Upvotes: 1

L. Vadim
L. Vadim

Reputation: 549

html

<textarea id="txtArea"></textarea>
<button type="button" onclick="clickOn()">

js

<script>
function clickOn() 
{
 document.getElementById("txtArea").value = document.getElementById("txtArea").value + "\n*";
}
</script>

Upvotes: 0

Related Questions