如何使「輸入」鍵在textarea提交表格

我有一個使用textarea而不是文字的聊天，原因很明顯。這就是爲什麼每次成員擊中ENTER時，他們會得到一條新線，而不是發送消息。我想改變這一點，所以每次他們按ENTER =要提交的消息，然後光標返回textarea下一個消息輸入。我試過在這個網站上發現不同的代碼，大多數沒有工作，那些似乎做的事情只是刷新頁面，我有一個空白頁。如何使「輸入」鍵在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>

非常感謝您的寶貴時間。

來源

2012-01-19 Ingrid

什麼編程語言，你說什麼？HTML？ – gorootde

PHP是編程語言。 – Ingrid

編程語言應該是無關緊要的，因爲這是一個客戶端請求 –

我創建了一個的jsfiddle就如何用jQuery做一個例子，keypress功能和which屬性：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(); 
     } 
    }); 
});

來源

2012-01-19 22:21:15

安德斯，這個作品，但消息只停留一秒鐘，然後消失聊天。 – Ingrid

好的，編輯一些適合我的聊天內容，你的代碼現在完美的工作，謝謝大家，你一直很親切！ – Ingrid

很高興能幫到你。 :) –

好吧，假設你使用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不存在問題，那麼可能更新您的問題以明確排除它。

來源

2012-01-19 22:14:33

我試過了，但似乎沒有工作，或者我根本不知道如何做到這一點，我是否需要改變代碼的東西？ty – Ingrid

我更新了我的答案。對不起，我忘了將您的ID添加到textarea。 –

好的，現在它有一個響應，好像我插入它正確，但我得到一個像刷新空白頁面。 – Ingrid

-2

使用<input type=text>而不是<textarea>。那麼你有更好的機會。在textarea中，按Enter應該表示文本中的換行符，而不是文本的提交。

來源

2012-01-19 22:23:12

是的，我知道，它曾經是文本，但對於發佈較長文章的聊天來說是一個問題（如在此評論框中），只有一行。感謝您花時間回答。 – Ingrid

試試這個（請注意，當你按ENTER去提交，但Shift + Enter進入新的生產線。

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

來源

2016-04-04 22:20:41

你是上帝謝謝你！ –

如何使「輸入」鍵在textarea提交表格

回答

相關問題