입력 키에서 양식 제출 금지

입력 키에서 양식 제출 금지

입력 키가 각도로 폼을 제출하지 않도록 하려면 어떻게 해야 합니까?

ID x의 버튼에서 송신하지 않는 한, 13키를 잡아 무효로 하거나 폼을 무효로 하는 방법이 있습니까?

감사해요.

에 'ng-click'을 사용할 .<button type="button">폼 태그 안에서도 사용할 수 있습니다.은 "Default Behavior"입니다.type="submit"이치노Javascript!

이미 다른 유저로부터, 「버튼 타입="버튼"이 문제의 원인이 된다고 써져 있습니다.참고: 유형="..." 선언이 없는 버튼은 기본적으로 "선택"입니다!따라서 항상 type="버튼"을 사용하십시오.

몇 시간 후, 이 이상한 코드가 유일하게 작동했다.

난 더 나은 답을 기다리고 있어. 이 괴물을 받아들이지 않을 거야.

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 키를 누를 때마다 창이 전송을 시도하고 전송에 실패합니다.사일런트하지 않습니다.못생겼지만 효과가 있다.

편집: 키 다운이 요소 바인딩에 대한 키 업보다 약간 우수합니다.이제 Enter 키는 사일런트하게 실패합니다.

아주 간단해서 아무것도 할 필요가 없어각도 +2를 사용하는 경우 폼태그에 추가합니다.

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

폼이 단일 요소에만 전송되지 않도록 하려면 다음 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개 이상이고 버튼이나 입력이 없는 경우 [type=submit]를 눌러도 전송이 트리거되지 않습니다.

입력 2개 에는 2개 이상의 필드를 할 수 .<span ng-click="submit()">Sumbit</span>이러한 입력 필드에 키를 트리거하지 않도록 합니다.

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

나는 검증을 위해 제출 + 양식 상태를 트리거하는 지시문을 작성했습니다.교환:

<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을 사용하지 않고 폼 제출 기능을 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');
  }

폼 태그의 ng-submit을 사용하여 컨트롤러에서 기본 폼 제출을 가져올 수 있습니다.이것에 의해, 다음과 같이 송신되지 않게 됩니다.

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

또는 주요 이벤트를 꼭 포착하고 싶은 경우 이벤트를 통과하는 지시사항을 stop이라고 부를 수 있습니다.

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

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>

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

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() { }

}

[ Submit ]버튼을 클릭하여 폼 송신으로 설정되어 있는지 확인할 때 변수를 설정합니다.

$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