[解決済み] AngularJSでEnterキーを押したときにフォームを送信する
質問
この場合、Enterキーを押したときに、これらの入力が関数を呼び出すようにするには、どのようなオプションがありますか?
Htmlです。
<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>
EDIT: 送信ボタンに関するコメントについて、以下を参照してください。 送信ボタンがなく、エンターキーを押してフォームを送信する場合 という解答を与えています。
<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>
または、個々のフィールドにエンターキー押下をバインドすることもできます。
また、簡単なkeypresディレクティブの作成方法については、こちらのSO質問を参照してください。 AngularJSでonKeyUpを検出するにはどうしたらいいですか?
を編集しました(2014-08-28)。この回答が書かれた時点では、ng-keypress/ng-keyup/ng-keydownはAngularJSのネイティブディレクティブとして存在しませんでした。 以下のコメントで、@darlan-alves がかなり良い解決策を提示しています。
<input ng-keyup="$event.keyCode == 13 && myFunc()"... />
関連
-
処理されない例外が発生しました。Angular 実行中のプロジェクトで NGCC に失敗しました。
-
angularjs統合ueditor入門
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] フォーム送信のようなJavaScriptのポストリクエスト
-
[解決済み] jQuery AJAX送信フォーム
-
[解決済み] ユーザーがEnterキーを押してフォームを送信できないようにする
-
[解決済み] 入力フィールドにフォーカスを当てるには?
-
[解決済み] jQueryで'Enter'でフォームをサブミット?
-
[解決済み] Enterキーが押されたときにフォームを送信しないようにする
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Angular ui-routerで$stateメソッドを$stateChangeStart toStateとfromStateで使用する。
-
[解決済み] angularのpostリクエストでpreflightのレスポンスがHTTPステータスコード403で不正になる。
-
[解決済み] AngularJSでkeypressイベントを使用するには?
-
[解決済み] md-selectでデフォルト値を設定する方法
-
[解決済み] AngularJSのコントローラを指定する:ngControllerと$routeProviderを使用する利点
-
[解決済み] AngularJS コントローラにおける 'this' と $scope の比較
-
[解決済み] なぜAngularJSはselectに空のオプションを含めるのですか?
-
[解決済み] コントローラでフィルタを使用するには?
-
[解決済み] 子コントローラから親スコープにアクセスするAngularJS
-
[解決済み】送信ボタンがないのにEnterキーを押してフォームを送信する