키에서 양식 양식 방지 입력

키에서 양식 양식 방지 입력

---

키가 양식을 설치해야합니까?

ID가 x 인 버튼에서 발사하지 않는 한 13 키를 잡아서하거나 양식을 유효하지 않은 설정하는 방법이 있습니까?

감사합니다

---

어쨌든 ng-click이 있기 때문에 <button type="button">태그 내에서 사용할 수 있습니다 . 버튼 요소의 기본 동작은 type="submit"방지하려는 것입니다. 따라서 자바는 전혀 필요하지 않습니다!

---

다른 사용자는 [button type = "submit"] 이이 문제를 많이 이미 작성했습니다. 참고 : type = "..."선언이없는 버튼은 기본적으로 "제출"입니다! 따라서 항상 type = "button"을 사용합니다.

---

몇 시간 후,이 이상한 코드 만 작동했습니다.

나는 더 나은 대답을 기다리고있다.

app.directive('onKeyup', function() {
    return function(scope, elm, attrs) {
      var allowedKeys = scope.$eval(attrs.keys);
      elm.bind('keydown', function(evt) {           
        angular.forEach(allowedKeys, function(key) {
          if (key == evt.which) {
             evt.preventDefault(); // Doesn't work at all
             window.stop(); // Works in all browsers but IE    
             document.execCommand("Stop"); // Works in IE
             return false; // Don't even know why it's here. Does nothing.                     
          }
        });
      });
    };
});

모든 양식 입력을 사용하여 트리거합니다.

<input on-keyup="bla" keys="[13]" .... />

현재 사용 가능한 사용자가 Enter 키를 누를 때마다 창이 출시 될 시도한 다음 그렇게하지 않습니다. 추악하지만 작동합니다.

편집 : keydown은 요소 바인딩에 대한 keyup보다 약간 낫습니다. 이제 엔터 키가 조용히 실패합니다.

---

ng-keypress를 추가 할 수 있습니다 (Angular 1.x 용).

<input type="text" name="myField" ng-keypress="keyPressHandler($event)"/>

에 대한 다음 구현으로 keyPressHandler:

$scope.keyPressHandler = function(e) {
    if (e.keyCode === 13) {
        e.preventDefault();
        e.stopPropagation();

        // Perform your custom logic here if any
    }
}

---

해당 문제가 발생하여 양식에서 버튼을 제거했습니다. ng-click내가 사용하는 것이 모든 것이 묶여있는 것을 확인하는 것이 ng-model관계없이 중요하지 않습니다.

나는 나쁜 습관이라는 것을 알리고 지옥은 키 입력을 가로채는 사용자 지정 지시문을 작성하는 것보다 확실합니다.

---

이것을 확인 하십시오 :

[유형 = 제출] 입력 키를 누르는 것이 트리거되지 않습니다.

따라서 2 개 이상의 입력 필드가있는 경우 <span ng-click="submit()">Sumbit</span>해당 입력 필드에서 키의 키 트리거를 방지 하는 것과 같은 방법 을 사용할 수 있습니다 .

---

너무 간단해서 아무것도 할 필요가 없습니다. 각도 +2를 사용하는 경우 양식 태그에 추가하십시오.

<form (keydown.enter)="$event.preventDefault()" ...>

---

이 문제를 발견했습니다. 예, 페이지에서 모든 유형 = '제출'을 제거하고 다른 모든 버튼에 유형 = "버튼"이 있는지 확인해야하지만 문제는 여전히 유효성 검사를 사용할 수 있습니다.

식물을 위해 양식 + 양식 상태를 트리거하는 지시문을 만들었습니다. 교체 :

<button type="submit">

와

<button submit-button type="button">

지령 :

export default /*@ngInject*/ function submitButton($log) {
return ({
    require: '^form',
    link: link,
    restrict: 'A'
});

function link(scope, element, attributes, formCtrl) {

    element.on('click', clickHandler);

    function clickHandler() {
        formCtrl.$setDirty(true);
        formCtrl.$setSubmitted(true);
        angular.element(element[0].form).triggerHandler('submit');
        $log.info('Form Submitted');
    }

}

버튼에 집중할 때 여전히 ENTER를 누르십시오. UX 및 접근성에 더 좋습니다.

---

양식 태그에서 ng-submit을 사용하여 기본 양식을 사용하여 신청할 수 있습니다.

http://docs.angularjs.org/api/ng.directive:ngSubmit

또는 키 이벤트를 실행하고 중지를 호출 할 수있는 이벤트를 전달하는 지시문이 있습니다.

http://docs.angularjs.org/api/ng.directive:ngKeyup

---

내가 가장 쉬운 방법은 양식 태그에서 ng-submit을 사용하지 않고 ng-click으로 양식을 구축하는 기능을 출시하고 바인딩하는 입력 유형을 버튼으로 사용하는 것입니다.

이게 도움이 되길 계속.

---

이것은 지침이없는 이상하지만 빠르고 간단한 솔루션입니다.

HTML :

  <form ng-submit='submitForm()'>
    <input type='text'>
    <button type='submit' ng-mousedown='doSubmit=true'>submit</button>
  </form>

제어 장치 :

  $scope.submitForm = function() {
    if (!$scope.doSubmit) {
        return;
    }
    $scope.doSubmit = false;
    console.log('execute some actions');
  }

---

angular.element(document).ready(function () {
    angular.element(window).keydown(function () {
        if(event.keyCode == 13) {
                  event.preventDefault();
                  return false;
        }
    });
});

angularjs 컨트롤러에서 시도하십시오.

---

양식 내의 컨트롤에 포커스가있는 동안 Enter 키를 클릭하면 양식이 제출됩니다. ng-submit을 사용하여 리스너를 등록하는 경우이를 가로 채고 기본 프로세스 (예 : 양식 제출)를 중지하기 위해 기본 방지를 사용할 수 있습니다. 일 봐

---

다음이 작동합니다. . . 즉, 양식은 버튼을 클릭 할 때만 제출되고 Enter입력 상자 를 누를 때 제출되지 않습니다 . (이것은 반응 형 양식에서 확실히 작동합니다. 템플릿 양식에 대해서는 테스트하지 않았습니다).

<form #form [formGroup]="form" METHOD="GET" action="http://localhost:3000/test">
  <input placeholder="Enter"/>
  <input placeholder="The Dragon"/>
  <button type="button" (click)="form.submit()">Submit</button>
</form>

물론 모든 수입 및 선언을 기억하십시오.

app.module.ts

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
. . .
    FormsModule,
    ReactiveFormsModule

  ]
. . . 
})
export class AppModule { }

test.component.ts

import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent {
  form: FormGroup = new FormGroup({});
  constructor() { }

}

---

제출 버튼을 클릭 할 때 변수를 설정하고 제출 양식에 설정되었는지 확인하십시오.

$scope.click = function () {
    $scope.clicked = true;
    $scope.submit();
};

$scope.submit = function () {
    if ($scope.clicked) {
        ... submit
    } else {
        ... prevent defaults
    }
     $scope.clicked = false;
};

jsfiddle 참조

참고 URL : https://stackoverflow.com/questions/19549985/prevent-form-submission-on-enter-key