当用户按下回车键时，自动在文本区域/文本中插入消息

Question

I'm making simple chatroom, I have textarea in index.php where user can input his/her message. I used link to pass the values in ajax instead of button. In my situation, I usually, click the "send" link in order to pass the values. But how can I solve this when user hit enter his/her message and automatically, display to the div?

**

Index.php

**

<form name="form1" onsubmit="submitAjaxQuery(event)" >
<textarea name="msg"></textarea><br/>
<a href="#" onclick="submitChat()"> Send </a>
</form>

function submitChat(){

    if( form1.msg.value ==''){ 
    alert("All fiels are mandatory");
    return; 
    }

    form1.uname.readonly=true;
    form1.uname.style.border='none';


    var uname= form1.uname.value;  
    var msg = form1.msg.value;


    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState == 4 && xmlhttp.status ==200)
        {
         document.getElementById('chatlogs').innerHTML = xmlhttp.responseText;

        }

    }

    xmlhttp.open('GET','insert.php?uname='+uname+'&msg='+msg,true);
    xmlhttp.send();
}

Answer 1

Hi You can do like this.

    $("textarea").keydown(function(e)
{
    if (e.keyCode == 13)
    {
      submit();
    }
}

Answer 2

Generally, the thing to do is to add an "onKeyDown" handler that looks to see which key triggered the event, and do a submit if the key is the magic number 13 which is the carriage return. Looks something like this:

var onKeyDown = function(e) {
  if (e.which == 13) {
    e.preventDefault();
    submitChat();
  }
};

$("#id-to-text-area").on("keydown", onKeyDown);

Answer 3

**Add Handle() function onkeypress event**
<form name="form1" onsubmit="submitAjaxQuery(event)" >
<textarea name="msg"></textarea><br/>
<a href="#" onclick="submitChat()" onkeypress="handle()"> Send </a>
</form>

 function handle(e){ {
    if(e.which == 13) {
        if( form1.msg.value ==''){ 
     alert("All fiels are mandatory");
return; 
}

form1.uname.readonly=true;
form1.uname.style.border='none';


var uname= form1.uname.value;  
var msg = form1.msg.value;


var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function(){
    if(xmlhttp.readyState == 4 && xmlhttp.status ==200)
    {
     document.getElementById('chatlogs').innerHTML = xmlhttp.responseText;

    }

}

xmlhttp.open('GET','insert.php?uname='+uname+'&msg='+msg,true);
xmlhttp.send();
}
}

Answer 4

Please try like this,

$("textarea").keypress(function(event){
             var p = event.which;           
             if(p==13){ // Enter key press
        // Your code goes here
    }
    });

Answer 5

you can use this code for enter event . here js fiddle

html code

<form name="form1" onsubmit="submitAjaxQuery(event)" >
<textarea id="area" name="msg"></textarea><br/>
<a href="#" onclick="submitChat()"> Send </a>
</form>

javascript

$("#area").keypress(function(e) {
    if(e.which == 13) {
        submitChat();
        alert('message submit!');
    }
});

Update

you may need to add jquery library ..

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Answer 6

$("textarea").keypress(function(event) {
if (event.which == 13) {
    event.preventDefault();
    $("form").submit();
}
});

Answer 7

You can try to detect when the return key is pressed inside your [name=msg] textarea. This is vanilla JS (but you can also use jQuery for this) to add at the bottom of your page.

    <script type="text/javascript"> 
    function listenKeys(evt) { 
      var evt = (evt) ? evt : ((event) ? event : null); 
      var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
      if ((evt.keyCode == 13) && (node.name=="msg"))  {
                // RETURN KEY DETECTED IN msg, EXECUTE YOUR CODE HERE
      } 
    } 

    document.onkeypress = listenKeys; 

    </script>

Hope it helps