読者です 読者をやめる 読者になる 読者になる

38ch blog

気になるから言いたい。

divタグでng-keyupを使う方法

Angularを使って、入力フォームに入力があった後にEnterを押すと、検索が走るようにするためにng-keyupってやつを使うんですが、それを今回divタグにつけたかったので、やり方を調べてみました。

まず、一般的なやり方

<input type="text" class="form-control" placeholder="キーワードで検索" ng-model="$ctrl.keyword" ng-keyup="$event.keyCode == 13 ? $ctrl.search() : null">

divにng-keyupをつけるときにはtabindex="1"もセットにしてあげてください。

<div ng-keyup="$event.keyCode == 13 ? $ctrl.search() : null" tabindex="1">
     
</div>

tabindex="1"をつけると、そのdivをクリックしたときに謎の枠線が表示されます。 枠線はcssで強制的に消すかして対応してください。

.temp {
    outline: none !important; 
}

以下参考ページ

javascript - Using AngularJS ngKeyup on a div rather than an input - Stack Overflow

jquery - Strange border on tabIndex on <p> element - Stack Overflow