ansaurus

Question

[JS] Write to textarea when enter key is pressed?

Answer 1

A:

Use the form element

<form onsubmit="addtxt('textarea1')">
    <textarea id="textarea1"></textarea>
    <br><input type="text" />
</form>

BGerrissen 2010-09-09 14:58:57

OK, this worked. However, after the text is written to the textarea, the page is immediately refreshed and the text disappears.

Big Mo Fo 2010-09-09 15:02:01

Ah then you dont want to submit at all

BGerrissen 2010-09-09 17:06:06

Answer 2

+1 A:

Instead of submit, try using the keypress event. Detect when the enter key is pressed, copy the data, and cancel the event (to prevent form submission). If you allow the form to submit, it will simply replace the existing page with the result of the form post.

Modifying your current code:

<html> 
<head> 
<script type="text/javascript"> 
  function addtxt(e,ctl,input) {
    var key;
    if (window.event) {
       key = event.keyCode;
    } else {
       key = e.which;
    }
    if (key == 13) {
       var obj=document.getElementById(input);
       var txt=document.createTextNode("blah blah");
       obj.appendChild(txt);
       ctl.value = '';
       return false;
    }
    return true;
  } 
</script> 
</head> 
<body> 
<textarea id="textarea1"></textarea> 
<br><input type="text" onkeypress="return addtxt(event,this,'textarea1');"> 
</body> 
</html>

Note that there may be much better ways to achieve your ultimate goal, but since you don't state what that is, this is really the best I can do. Also, I'd would definitely look at using a framework like jQuery/Dojo/Prototype and add the handlers unobtrusively.

tvanfosson 2010-09-09 15:00:17

This sounds like a good method... but how would I go about achieving it?

Big Mo Fo 2010-09-09 15:02:36

@Big - I added an example.

tvanfosson 2010-09-09 15:06:57

Thankyou, this is good! Basically, what i'm trying to achieve is a rudimentary terminal-like-thing. I want to be able to type something into the input box, press enter, have the script read it, run the input through an if statement and output something based on what was entered.

Big Mo Fo 2010-09-09 15:08:11

However, this code won't accept any other keypress...

Big Mo Fo 2010-09-09 15:10:38

@Big -- I'll fix it. Don't know what I was thinking. It should return true unless it's an enter. Presumably the input box should be cleared as well.

tvanfosson 2010-09-09 15:18:03

Awesome tvan, this is really cool. Helping me learn a little. What does the ctl.value = '' do? This syntax really reminds me a lot of actionscript...

Big Mo Fo 2010-09-09 15:26:08

Some points: using the `keydown` event will mean you can use the `keyCode` event property in all browsers. Also, `return true` is redundant: returning `undefined` (which is what happens in the absence of a `return` statement) does what you want. Finally, see my answer for details, but manipulating a textarea's value should be done via the `value` property.

Tim Down 2010-09-09 15:34:32

Do any of y'all know how I can modify this code to make each statement inserted onto a new line in the textarea? And the big question, I guess: would be where would I insert the if statement to read the user's input and output some text in the textarea based on what's read?

Big Mo Fo 2010-09-09 17:24:06

Answer 3

A:

You can use JQuery

$('textarea#textarea1').keypress(function(e) {
    if (e.keyCode == 13) { // enter
       //do some stuff
    }
});

jcubic 2010-09-09 15:04:01

Answer 4

A:

This will do the job. Also, you should deal with the value property of the textarea rather than appending text nodes to it: if the user changes the textarea's value at all, changing its child nodes afterwards will have no effect. If you want the textarea to be read-only, add a readonly attribute: <textarea id="textarea1" readonly></textarea>.

<script type="text/javascript">
    function inputKeyDown(evt, input) {
        if (evt.keyCode == 13) {
            var textarea = document.getElementById("textarea1");
            textarea.value += "\n" + input.value;
            input.value = ""; // I'm guessing you may want this
            return false;
        }
    }
</script>

<input type="text" onkeydown="return inputKeyDown(event, this);">

Tim Down 2010-09-09 15:20:48

I completely overlooked this reply, Tim, but this is EXACTLY the kind of foundation I want. After toggling with the other answer for a couple of hours, I finally noticed this post and plugged it in. You are a javascript god. Can anyone recommend any good tutorials? I have a little knowledge of python and working knowledge of both CSS and xHtml.

Big Mo Fo 2010-09-09 19:11:26

ansaurus

tags:

views:

answers:

[JS] Write to textarea when enter key is pressed?

related questions