如何实现HTML textarea按下回车键提交表单的功能

针对你的AngularJS场景，只需要给textarea新增键盘事件监听即可，同时可以保留Shift+回车换行的常用交互，具体实现如下：

方案1：直接在模板内写判断逻辑（简单场景适用） #

直接修改你的textarea标签，新增ng-keydown属性即可：

<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..." 
            class="form-control-lg form-control" 
            ng-model="newMessageContent"
            ng-keydown="$event.keyCode === 13 && !$event.shiftKey && (sendMessage(newMessageContent), $event.preventDefault())"
        ></textarea>
    </form>
</div>

方案2：把逻辑封装到控制器（更易维护） #

如果后续逻辑需要扩展，建议把键盘判断逻辑放到控制器中：

1. 修改textarea绑定控制器方法

<textarea 
    id="typeMessageBox" 
    placeholder="Write here and hit enter to send..." 
    class="form-control-lg form-control" 
    ng-model="newMessageContent"
    ng-keydown="handleKeydown($event)"
></textarea>

2. 控制器新增对应方法

angular.module('myApp', [])
.controller('myCtrl', function($scope) {
    // 原有提交逻辑
    $scope.sendMessage = function(content) {
        // 这里写你的表单提交逻辑
        console.log('提交内容：', content);
        // 提交完成后可清空输入框
        $scope.newMessageContent = '';
    };

    // 新增键盘事件处理
    $scope.handleKeydown = function($event) {
        // 按下回车键且没有按下Shift键时触发提交
        if ($event.keyCode === 13 && !$event.shiftKey) {
            // 阻止默认的换行行为
            $event.preventDefault();
            $scope.sendMessage($scope.newMessageContent);
        }
    }
});

说明 #

• 如果你不需要换行功能，直接删掉代码中的!$event.shiftKey判断即可，所有按下回车的操作都会直接提交表单
• 原有ng-submit的逻辑不需要修改，和现有提交逻辑完全兼容

内容的提问来源于stack exchange，提问作者Amara