テキストエリアに「Enter」キーを作成する方法フォームを送信

Question

私は明らかな理由からテキストの代わりにテキストエリアを使用するチャットをしています。このため、メンバーがENTERを押すたびに、メッセージを送信する代わりに新しい行が表示されます。 私はこれを変更したいので、ENTER =ヒットするたびにメッセージを送信し、次にカーソルを次のメッセージ入力のためにtextareaに戻します。 私はこのサイトで見つかったさまざまなコードを試しましたが、ほとんどの作業がなく、何かをしたような人はページをリフレッシュしていました。

マイコード：

<form name="message" action=""> 
    <textarea name="usermsg" autocomplete="off" type="text" id="usermsg" rows="4" cols="30" style="width: 450px; margin-left: 25px;"> 
    </textarea> 
    <br/> 

    <p style="margin-left: 420px;"><input name="submitmsg" type="submit" id="submitmsg" value="Send" /></p> 
</form> 

はお時間をありがとうございました。

Answer 1

私はjQueryとkeypress機能とwhichプロパティでそれを行う方法の一例でjsfiddleを作成している：あなたがこれ以上を求めている正確に何http://jsfiddle.net/GcdUE/

わからないので、更なるご質問をご指定ください可能なら。

$(function() { 
    $("#usermsg").keypress(function (e) { 
     if(e.which == 13) { 
      //submit form via ajax, this is not JS but server side scripting so not showing here 
      $("#chatbox").append($(this).val() + "<br/>"); 
      $(this).val(""); 
      e.preventDefault(); 
     } 
    }); 
}); 

Answer 2

さて、あなたはそれが簡単なあなたの入力フィールド上のリスナーになりますjqueryのを使用していたと仮定：

は

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#usermsg').keypress(function(e){ 
     if(e.which == 13){ 
      // submit via ajax or 
      $('form').submit(); 
     } 
    }); 
}); 
</script> 

あなたのhtml頭では、これを追加します：<前に、あなたのフッターに

/ボディ>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script> 

jsやjqueryが質問から外れている場合は、おそらくそれを除外するように質問を更新してください。

Answer 3

<textarea>の代わりに<input type=text>を使用してください。それから、はるかに良いチャンスがあります。 textareaでは、Enterキーを押すとテキストが改行され、テキストは提出されません。

Answer 4

この（あなたが提出行くENTERますが、SHIFT +改行を行ってEnterキーを押したとき。

$("#textareaId").keypress(function (e) { 
    if(e.which == 13 && !e.shiftKey) {   
     $(this).closest("form").submit(); 
     e.preventDefault(); 
     return false; 
    } 
});