61

入力キーが角度でフォームを送信しないようにするにはどうすればよいですか?

ID x のボタンから送信しない限り、13 キーをキャッチして無効にするか、フォームを無効に設定する方法はありますか?

ありがとう

4

15 に答える 15

111

とにかく ng-click があるので<button type="button">、 form タグ内でも , を使用することもできます。ボタン要素のデフォルトの動作は ですtype="submit"。これは、防止したいものです。だから、JavaScriptはまったく必要ありません！

于 2014-04-25T13:16:07.527 に答える
25

他のユーザーは、[button type="submit"] がこの問題を引き起こすと既に書いています。注意: type="..." 宣言のないボタンは、デフォルトで「送信」されます! そのため、必ず type="button" を使用してください。

于 2016-01-28T10:02:44.950 に答える
12

数時間後、この奇妙なコードだけが機能しました。

私はより良い答えを待っています、このモンスターを受け入れません:

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]" .... />

今のところ、ユーザーがエンター キーを押すたびに、ウィンドウは送信を試みますが、送信に失敗します。醜いが、それは動作します。

編集: keydown は、要素バインドの keyup よりも少し優れています。Enter キーは静かに失敗するようになりました。

于 2013-10-24T00:16:09.323 に答える
8

私は同様の問題を抱えていました.ボタンをフォームから外してしまいました. 私が使用ng-clickしていて、すべてがそれにバインドされているのを見て、ng-modelそれがフォーム内にあるかどうかは問題ではありません。

これが悪い習慣であることはわかっていますが、キーストロークをインターセプトするカスタム ディレクティブを作成するのは非常に困難です。

于 2014-03-19T13:05:44.643 に答える
5

この問題に遭遇しました。はい、すべての type='submit' をページから削除し、他のボタンに 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 とアクセシビリティの点で優れていると思います。

于 2016-09-15T11:38:50.447 に答える
2

私が見つけたこれに対する最も簡単な解決策は、送信の代わりに入力タイプをボタンとして使用し、フォーム送信機能をng-clickでバインドし、フォームタグでng-submitを使用しないことです。

これが役立つことを願っています。

于 2014-11-21T12:25:04.190 に答える
0

フォーム内のコントロールにフォーカスがあるときに Enter キーがクリックされると、フォームが送信されます。ng-submit を使用してリスナーを登録すると、これをインターセプトし、デフォルトの防止を使用してデフォルトのプロセス (つまり、フォームの送信) を停止できます。を見てください

于 2015-11-01T14:59:00.673 に答える
-1

送信ボタンをクリックしたときに変数を設定し、フォーム送信で設定されていることを確認してみてください。

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

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

jsfiddleを参照してください

于 2013-10-27T22:35:57.873 に答える