AngularJS로 Enter 키를 누르면 양식 제출

AngularJS로 Enter 키를 누르면 양식 제출

---

이 특정 상황에서 Enter를 누를 때 이러한 입력을 함수로 호출하려면 어떤 옵션을 사용해야합니까?

// HTML view //
<form>
    <input type="text" ng-model="name" <!-- Press ENTER and call myFunc --> />
    <br />
    <input type="text" ng-model="email" <!-- Press ENTER and call myFunc --> />
</form>

// Controller //
.controller('mycontroller', ['$scope',function($scope) {
    $scope.name = '';
    $scope.email = '';
    // Function to be called when pressing ENTER
    $scope.myFunc = function() {
       alert('Submitted');
    };
}])

---

Angular는 이것을 즉시 지원합니다. 양식 요소에서 ngSubmit 을 사용해 보셨습니까 ?

<form ng-submit="myFunc()" ng-controller="mycontroller">
   <input type="text" ng-model="name" />
    <br />
    <input type="text" ng-model="email" />
</form>

편집 : 제출 버튼에 대한 의견에 따라 제출 버튼 없이 Enter 키를 눌러 양식 제출을 참조하십시오 .

<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>

숨겨진 제출 버튼 솔루션이 마음에 들지 않으면 컨트롤러 기능을 Enter 키 누르기 또는 키업 이벤트에 바인딩해야합니다. 일반적으로 사용자 지정 지시문이 필요하지만 AngularUI 라이브러리에는 멋진 키 누르기 솔루션이 이미 설정되어 있습니다. http://angular-ui.github.com/을 참조하십시오

angularUI lib를 추가하면 코드는 다음과 같습니다.

<form ui-keypress="{13:'myFunc($event)'}">
  ... input fields ...
</form>

또는 Enter 키 누르기를 각 개별 필드에 바인딩 할 수 있습니다.

또한 간단한 keypres 지시문을 작성하려면이 SO 질문을 참조하십시오. AngularJS에서 onKeyUp을 어떻게 감지합니까?

편집 (2014-08-28) :이 답변을 작성할 당시 AngularJS에는 ng-keypress / ng-keyup / ng-keydown이 기본 지시문으로 존재하지 않았습니다. 아래 주석에서 @ darlan-alves는 다음과 같은 훌륭한 솔루션을 제공합니다.

<input ng-keyup="$event.keyCode == 13 && myFunc()"... />

---

양식없이 함수를 호출하려면 내 ngEnter 지시문을 사용할 수 있습니다.

자바 스크립트 :

angular.module('yourModuleName').directive('ngEnter', function() {
        return function(scope, element, attrs) {
            element.bind("keydown keypress", function(event) {
                if(event.which === 13) {
                    scope.$apply(function(){
                        scope.$eval(attrs.ngEnter, {'event': event});
                    });

                    event.preventDefault();
                }
            });
        };
    });

HTML :

<div ng-app="" ng-controller="MainCtrl">
    <input type="text" ng-enter="doSomething()">    
</div>

나는 내 트위터 와 내 요지 계정 에 다른 멋진 지시를 제출 합니다 .

---

입력이 하나만있는 경우 양식 태그를 사용할 수 있습니다.

<form ng-submit="myFunc()" ...>

둘 이상의 입력이 있거나 양식 태그를 사용하지 않거나 특정 필드에 Enter 키 기능을 연결하려는 경우 다음과 같이 특정 입력에 인라인 할 수 있습니다.

<input ng-keyup="$event.keyCode == 13 && myFunc()" ...>

---

주어진 답변보다 좀 더 확장 가능하고 의미있는 것을 원했기 때문에 내장 객체와 비슷한 방식으로 자바 스크립트 객체를 취하는 지시문을 작성했습니다 ngClass.

HTML

<input key-bind="{ enter: 'go()', esc: 'clear()' }" type="text"></input>

객체의 값은 지시문 범위의 맥락에서 평가됩니다-작은 따옴표로 묶어야합니다. 그렇지 않으면 지시문이로드 될 때 모든 함수가 실행됩니다 (!)

그래서 예를 들면 : esc : 'clear()'대신esc : clear()

자바 스크립트

myModule
    .constant('keyCodes', {
        esc: 27,
        space: 32,
        enter: 13,
        tab: 9,
        backspace: 8,
        shift: 16,
        ctrl: 17,
        alt: 18,
        capslock: 20,
        numlock: 144
    })
    .directive('keyBind', ['keyCodes', function (keyCodes) {
        function map(obj) {
            var mapped = {};
            for (var key in obj) {
                var action = obj[key];
                if (keyCodes.hasOwnProperty(key)) {
                    mapped[keyCodes[key]] = action;
                }
            }
            return mapped;
        }

        return function (scope, element, attrs) {
            var bindings = map(scope.$eval(attrs.keyBind));
            element.bind("keydown keypress", function (event) {
                if (bindings.hasOwnProperty(event.which)) {
                    scope.$apply(function() {
                         scope.$eval(bindings[event.which]);
                    });
                }
            });
        };
    }]);

---

또 다른 방법은 ng-keypress를 사용하는 것입니다.

<input type="text" ng-model="data" ng-keypress="($event.charCode==13)? myfunc() : return"> 

AngularJS로 Enter를 누르면 입력 제출-jsfiddle

---

shift + enter 지원으로 매우 좋고 깨끗하며 간단한 지시어 :

app.directive('enterSubmit', function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            elem.bind('keydown', function(event) {
                 var code = event.keyCode || event.which;
                 if (code === 13) {
                       if (!event.shiftKey) {
                            event.preventDefault();
                            scope.$apply(attrs.enterSubmit);
                       }
                 }
            });
        }
    }
});

---

데이터 유효성 검사를 원할 경우

<!-- form -->
<form name="loginForm">
...
  <input type="email" ng-keyup="$loginForm.$valid && $event.keyCode == 13 && signIn()" ng-model="email"... />
  <input type="password" ng-keyup="$loginForm.$valid && $event.keyCode == 13 && signIn()" ng-model="password"... />
</form>

여기서 중요한 추가 사항은 $loginForm.$valid기능을 실행하기 전에 양식을 확인하는 것입니다. 이 질문의 범위를 벗어나는 유효성 검사를 위해 다른 속성을 추가해야합니다.

행운을 빕니다.

---

숨겨진 제출 버튼이있는 경우 ngShow 지시문을 사용하여 다음과 같이 false로 설정할 수 있음을 지적하고 싶습니다.

HTML

<form ng-submit="myFunc()">
    <input type="text" name="username">
    <input type="submit" value="submit" ng-show="false">
</form>

---

ng-submit을 사용하고 두 입력을 별도의 양식 태그로 감싸십시오.

<div ng-controller="mycontroller">

  <form ng-submit="myFunc()">
    <input type="text" ng-model="name" <!-- Press ENTER and call myFunc --> />
  </form>

  <br />

  <form ng-submit="myFunc()">
    <input type="text" ng-model="email" <!-- Press ENTER and call myFunc --> />
  </form>

</div>

각 입력 필드를 자체 양식 태그로 감싸면 ENTER가 두 양식 중 하나에서 제출을 호출 할 수 있습니다. 둘 다에 하나의 양식 태그를 사용하는 경우 제출 단추를 포함해야합니다.

---

인라인 스타일을 반복하는 대신 CSS 클래스를 사용하면 약간 깔끔합니다.

CSS

input[type=submit] {
    position: absolute;
    left: -9999px;
}

HTML

<form ng-submit="myFunc()">
    <input type="text" ng-model="name" />
    <br />
    <input type="text" ng-model="email" />
    <input type="submit" />
</form>

---

FWIW-기본 확인 / 경고 부트 스트랩 모달에 사용한 지시문은 다음과 같습니다. <form>

(원하는대로 jQuery 클릭 동작을 data-easy-dismiss끄고 모달 태그에 추가 하십시오)

app.directive('easyDismiss', function() {
    return {
        restrict: 'A',
        link: function ($scope, $element) {

            var clickSubmit = function (e) {
                if (e.which == 13) {
                    $element.find('[type="submit"]').click();
                }
            };

            $element.on('show.bs.modal', function() {
                $(document).on('keypress', clickSubmit);
            });

            $element.on('hide.bs.modal', function() {
                $(document).off('keypress', clickSubmit);
            });
        }
    };
});

참고 URL : https://stackoverflow.com/questions/15417125/submit-form-on-pressing-enter-with-angularjs