How to submit form with enter press in html textarea

Question

I want to submit form as soon as I hit enter in the text area, this was working fine with input type text but, I don't know how to do it with text area. I have to use text area as I want text input to be expandable, how can I make it work? Thanks

<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>

Are you sure you want to do that? A textarea is designed so you can type paragraphs. As such, an ever key us expected to enter a line break, not submit the form. This is unexpected behaviour for the user. — infinitezero, Oct 12 '21 at 07:40
Does this answer your question? [How to make "Enter" key in a textarea submit a form](https://stackoverflow.com/questions/8934088/how-to-make-enter-key-in-a-textarea-submit-a-form) — SecretTimes, Oct 12 '21 at 07:43
@infinitezero I was doing that because that is a text input, and textarea is expandable so if someone add multiple lines of text how it will increase the size to get the entire message ? if you can suggest me any way then that would be really helpful — Amara, Oct 12 '21 at 07:46
I second @infinitezero. However, you can improve the UX by adding a check box "Enter submits form/ Press enter to submit, etc" and add an event listener `onKeyDown` and override the default behaviour. — rajabraza, Oct 12 '21 at 07:48

score 1 · Answer 1 · answered Oct 12 '21 at 09:17

You can use the following jQuery code to submit your form when hitting Enter in your textarea:

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

That said, it may not be a good idea. If you want an expandable field, that surely is because you'll have several lines of text, therefore almost certainly a line break.

I would highly encourage you to add a helptext stating that you WILL submit the form when entering Enter, as your users would be very surprised by this behavior.

Even better: don't try to change native behaviors. A textarea is working like this for a good reason, and everybody is used to it. Changing its behavior may seem a good idea to you, but you'll probably loose your users.

Thanks a lot, I have accepted the above answer as that was in angularjs purely but your explanation helped a lot. — Amara, Oct 12 '21 at 09:55

score 1 · Accepted Answer · answered Oct 12 '21 at 09:32

You can use ng-keypress and then check if keypress is equal enter then call to submit form function

On your textarea should be

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

Then your angular code shold be

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

How to submit form with enter press in html textarea

2 Answers2