在文本区域中按Enter键时，如何实现即时文本提交？

Question

Duplicate:

Submitting data from textarea by hitting “Enter”.

---

I've got a textarea and a submit button:

<textarea id="chat"></textarea>
<input type="submit" value="Submit" onclick="send_msg();">

The value of the of the texarea is submitted when Enter is hit:

    textarea.onkeyup = function(e) {
        alert(e.keyCode);
        e = e || window.event;
        if (e.keyCode === 13) {
            send_msg();
        }
        return true;
    }

Problem is to make the textarea submit its value prior to letting the cursor to jump to the next line. How's it possible to do that?

Answer 1

e.preventDefault(); This text is here because stack overflow insists that there is no useful answer with less than 30 characters. Guess how I feel about that?

Answer 2

The trick is to stop the browser from executing the default behaviour on key down and key up. To do that, simply return false in your onkeypress/onkeyrelease handlers when you detect keycode 13.

Answer 3

One issue this ignores is users running input method (editors) -- eg. non-latin text entry. The IME i am familiar with is the Kotoeri Hiragana IM on OSX, but there are numerous others both for japanese (Kotoeri alone has multiple different input modes, and there's at least one other major one called ATOK), in addition to modes for hangul, traditional and simplified chinese, as well as numerous other less well known languages. And these input methods exist on all major platforms (esp. Win, Mac, and Linux).

The problem that they introduce from the point of view of code similar to what you're attempting is that the exact physical keypresses does not necessarily correspond to the actual input that the user is entering.

For example typing the sequence of characters toukyou<enter> under hiragana by default will produce the string とうきょう , note that there is no <enter> in the resultant text because enter confirms the composed text. But in addition to this the actual sequence of characters that appears changes as the input is typed:

t // t
と // to
とう // tou
とうk // touk
とうky // touky
とうきょ // toukyo
とうきょう // toukyou

If memory serves when i implemented this in webkit it was necessary to make the keyCode be 229 on keyDown for all keys typed in an IME (for compat with IE) -- but i cannot recall what the behaviour of keyUp is.

It's also worth noting that in some IMEs you won't necessarily receive keydowns, keypress, or keyup. Or you will receive multiple. Or they're all sent together at the end of input.

In general this is a very... unclean... portion of the DOM event implementations currently.