如何在 html textarea 中使用 enter press 提交表單

Question

我想在文本區域中按回車鍵后立即提交表單，這對於輸入類型的文本工作正常，但是，我不知道如何在文本區域中執行此操作。 我必須使用文本區域，因為我希望文本輸入是可擴展的，我怎樣才能讓它工作？ 謝謝

<div ng-app="myApp" ng-controller="myCtrl">
    <form ng-submit="sendMessage(newMessageContent)">

    First Name: <input type="text" ng-model="firstName"><br>
    Last Name: <input type="text" ng-model="lastName"><br>
    <br>
    Full Name: {{firstName + " " + lastName}}
    <textarea id="typeMessageBox" placeholder="Write here and hit enter to send..." type="text submit" class="form-control-lg form-control" ng-model="newMessageContent"></textarea>
    </form>
</div> 

Answer 1

您可以在文本區域中按 Enter 鍵時使用以下 jQuery 代碼提交表單：

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

也就是說，這可能不是一個好主意。 如果您想要一個可擴展的字段，那肯定是因為您將有幾行文本，因此幾乎可以肯定是換行符。

我強烈建議您添加一個幫助文本，說明您將在輸入Enter時提交表單，因為您的用戶會對這種行為感到非常驚訝。

更好的是：不要試圖改變本機行為。 textarea 像這樣工作是有充分理由的，每個人都習慣了。 改變它的行為對你來說似乎是個好主意，但你可能會失去你的用戶。

Answer 2

您可以使用 ng-keypress 然后檢查 keypress 是否等於 enter 然后調用提交表單 function

在你的文本區域應該是

<textarea ng-keypress="getkeys($event)" ng-model="newMessageContent"></textarea>

那么您的 angular 代碼應該是

$scope.getkeys = function (event) {        
   if(event.keyCode == 13){
     $scope.sendMessage( $scope.newMessageContent );
   }        
}