423

下のテキストボックスでEnterキーを押すイベントをキャッチしたい。より明確にするために、 を使用しng-repeatて tbody を設定しています。HTMLは次のとおりです。

<td><input type="number" id="closeqty{{$index}}" class="pagination-right closefield" 
    data-ng-model="closeqtymodel" data-ng-change="change($index)" required placeholder="{{item.closeMeasure}}" /></td>

これは私のモジュールです:

angular.module('components', ['ngResource']);

リソースを使用してテーブルにデータを入力しています。コントローラーのコードは次のとおりです。

function Ajaxy($scope, $resource) {
//controller which has resource to populate the table 
}
4

19 に答える 19

352

別の方法は、標準ディレクティブを使用することですng-keypress="myFunct($event)"

次に、コントローラーで次のことができます。

...

$scope.myFunct = function(keyEvent) {
  if (keyEvent.which === 13)
    alert('I am an alert');
}

...
于 2013-09-05T00:18:42.757 に答える
185

angularビルドインディレクティブのみを使用した私の最も簡単なアプローチ：

ng-keypress、ng-keydownまたはng-keyup。

通常、ng-click で既に処理されているものにキーボードのサポートを追加したいと考えています。

例えば：

<a ng-click="action()">action</a>

それでは、キーボードのサポートを追加しましょう。

Enter キーによるトリガー:

<a ng-click="action()" 
   ng-keydown="$event.keyCode === 13 && action()">action</a>

スペースキーで:

<a ng-click="action()" 
   ng-keydown="$event.keyCode === 32 && action()">action</a>

スペースまたはエンターキー:

<a ng-click="action()" 
   ng-keydown="($event.keyCode === 13 || $event.keyCode === 32) && action()">action</a>

最新のブラウザを使用している場合

<a ng-click="action()" 
   ng-keydown="[13, 32].includes($event.keyCode) && action()">action</a>

keyCode の詳細:
keyCode は非推奨ですが、十分にサポートされている API です。代わりに、サポートされているブラウザーで $evevt.key を使用できます。https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
で詳細を参照してください

于 2015-03-18T22:20:26.353 に答える
15

属性としてng-keydown ="myFunction($event)" を使用できます。

<input ng-keydown="myFunction($event)" type="number">

myFunction(event) {
    if(event.keyCode == 13) {   // '13' is the key code for enter
        // do what you want to do when 'enter' is pressed :)
    }
}
于 2016-03-11T15:48:18.067 に答える
6

html

<textarea id="messageTxt" 
    rows="5" 
    placeholder="Escriba su mensaje" 
    ng-keypress="keyPressed($event)" 
    ng-model="smsData.mensaje">
</textarea>

controller.js

$scope.keyPressed = function (keyEvent) {
    if (keyEvent.keyCode == 13) {
        alert('presiono enter');
        console.log('presiono enter');
    }
};
于 2017-01-11T05:34:47.220 に答える
4

親要素のコントローラーに適用することもできます。この例を使用して、上下の矢印キーを押してテーブル内の行を強調表示できます。

app.controller('tableCtrl', [ '$scope', '$element', function($scope, $element) {
  $scope.index = 0; // row index
  $scope.data = []; // array of items
  $scope.keypress = function(offset) {
    console.log('keypress', offset);
    var i = $scope.index + offset;
    if (i < 0) { i = $scope.data.length - 1; }
    if (i >= $scope.data.length) { i = 0; }
  };
  $element.bind("keydown keypress", function (event) {
    console.log('keypress', event, event.which);
    if(event.which === 38) { // up
      $scope.keypress(-1);
    } else if (event.which === 40) { // down
      $scope.keypress(1);
    } else {
      return;
    }
    event.preventDefault();
  });
}]);


<table class="table table-striped" ng-controller="tableCtrl">
<thead>
    <tr>
        <th ng-repeat="(key, value) in data[0]">{{key}}</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="row in data track by $index" ng-click="draw($index)" ng-class="$index == index ? 'info' : ''">
        <td ng-repeat="(key, value) in row">{{value}}</td>
    </tr>
</tbody>
</table>

于 2014-05-07T17:21:25.237 に答える
3

しようとしている

ng-keypress="console.log($event)"
ng-keypress="alert(123)"

私のために何もしませんでした。

ng-keypress="count = count + 1" を実行するhttps://docs.angularjs.org/api/ng/directive/ngKeypressのサンプルが機能します。

Enterを押すとボタンのng-clickが呼び出される代替ソリューションが見つかりました。

<input ng-model="..." onkeypress="if (event.which==13) document.getElementById('button').click()"/>
<button id="button" ng-click="doSomething()">Done</button>
于 2014-10-19T04:30:44.233 に答える
2

これは、EpokK からの回答の拡張です。

入力フィールドで Enter が押されたときにスコープ関数を呼び出さなければならないという同じ問題がありました。ただし、入力フィールドの値を指定された関数に渡したいと思っていました。これが私の解決策です：

app.directive('ltaEnter', function () {
return function (scope, element, attrs) {
    element.bind("keydown keypress", function (event) {
        if(event.which === 13) {
          // Create closure with proper command
          var fn = function(command) {
            var cmd = command;
            return function() {
              scope.$eval(cmd);
            };
          }(attrs.ltaEnter.replace('()', '("'+ event.target.value +'")' ));

          // Apply function
          scope.$apply(fn);

          event.preventDefault();
        }
    });
};

});

HTML での使用は次のとおりです。

<input type="text" name="itemname" lta-enter="add()" placeholder="Add item"/>

EpokK の回答に感謝します。

于 2014-11-18T22:10:39.727 に答える
1

これはどうですか？：

<form ng-submit="chat.sendMessage()">
    <input type="text" />
    <button type="submit">
</form>

入力に何かを書き込んだ後にエンターキーを押すと、フォームはそれを処理する方法を知っています。

于 2015-07-10T10:24:45.817 に答える
0

私のプロジェクトで行ったコードの例。基本的に、エンティティにタグを追加します。テキストを入力したとします。タグ名を入力すると、事前に読み込まれたタグから選択できるドロップダウン メニューが表示されます。矢印で移動し、Enter キーで選択します。

HTML + AngularJS v1.2.0-rc.3

    <div>
        <form ng-submit="addTag(newTag)">
            <input id="newTag" ng-model="newTag" type="text" class="form-control" placeholder="Enter new tag"
                   style="padding-left: 10px; width: 700px; height: 33px; margin-top: 10px; margin-bottom: 3px;" autofocus
                   data-toggle="dropdown"
                   ng-change="preloadTags()"
                   ng-keydown="navigateTags($event)">
            <div ng-show="preloadedTags.length > 0">
                <nav class="dropdown">
                    <div class="dropdown-menu preloadedTagPanel">
                        <div ng-repeat="preloadedTag in preloadedTags"
                             class="preloadedTagItemPanel"
                             ng-class="preloadedTag.activeTag ? 'preloadedTagItemPanelActive' : '' "
                             ng-click="selectTag(preloadedTag)"
                             tabindex="{{ $index }}">
                            <a class="preloadedTagItem"
                               ng-class="preloadedTag.activeTag ? 'preloadedTagItemActive' : '' "
                               ng-click="selectTag(preloadedTag)">{{ preloadedTag.label }}</a>
                        </div>
                    </div>
                </nav>
            </div>
        </form>
    </div>

Controller.js

$scope.preloadTags = function () {
    var newTag = $scope.newTag;
    if (newTag && newTag.trim()) {
        newTag = newTag.trim().toLowerCase();

        $http(
            {
                method: 'GET',
                url: 'api/tag/gettags',
                dataType: 'json',
                contentType: 'application/json',
                mimeType: 'application/json',
                params: {'term': newTag}
            }
        )
            .success(function (result) {
                $scope.preloadedTags = result;
                $scope.preloadedTagsIndex = -1;
            }
        )
            .error(function (data, status, headers, config) {
            }
        );
    } else {
        $scope.preloadedTags = {};
        $scope.preloadedTagsIndex = -1;
    }
};

function checkIndex(index) {
    if (index > $scope.preloadedTags.length - 1) {
        return 0;
    }
    if (index < 0) {
        return $scope.preloadedTags.length - 1;
    }
    return index;
}

function removeAllActiveTags() {
    for (var x = 0; x < $scope.preloadedTags.length; x++) {
        if ($scope.preloadedTags[x].activeTag) {
            $scope.preloadedTags[x].activeTag = false;
        }
    }
}

$scope.navigateTags = function ($event) {
    if (!$scope.newTag || $scope.preloadedTags.length == 0) {
        return;
    }
    if ($event.keyCode == 40) {  // down
        removeAllActiveTags();
        $scope.preloadedTagsIndex = checkIndex($scope.preloadedTagsIndex + 1);
        $scope.preloadedTags[$scope.preloadedTagsIndex].activeTag = true;
    } else if ($event.keyCode == 38) {  // up
        removeAllActiveTags();
        $scope.preloadedTagsIndex = checkIndex($scope.preloadedTagsIndex - 1);
        $scope.preloadedTags[$scope.preloadedTagsIndex].activeTag = true;
    } else if ($event.keyCode == 13) {  // enter
        removeAllActiveTags();
        $scope.selectTag($scope.preloadedTags[$scope.preloadedTagsIndex]);
    }
};

$scope.selectTag = function (preloadedTag) {
    $scope.addTag(preloadedTag.label);
};

CSS + ブートストラップ v2.3.2

.preloadedTagPanel {
    background-color: #FFFFFF;
    display: block;
    min-width: 250px;
    max-width: 700px;
    border: 1px solid #666666;
    padding-top: 0;
    border-radius: 0;
}

.preloadedTagItemPanel {
    background-color: #FFFFFF;
    border-bottom: 1px solid #666666;
    cursor: pointer;
}

.preloadedTagItemPanel:hover {
    background-color: #666666;
}

.preloadedTagItemPanelActive {
    background-color: #666666;
}

.preloadedTagItem {
    display: inline-block;
    text-decoration: none;
    margin-left: 5px;
    margin-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 10px;
    color: #666666 !important;
    font-size: 11px;
}

.preloadedTagItem:hover {
    background-color: #666666;
}

.preloadedTagItemActive {
    background-color: #666666;
    color: #FFFFFF !important;
}

.dropdown .preloadedTagItemPanel:last-child {
    border-bottom: 0;
}
于 2013-11-13T10:10:00.227 に答える
0

this などの ng-keydown 、 ng-keyup 、 ng-press を使用できます。

関数をトリガーするには：

   <input type="text" ng-keypress="function()"/>

または、彼がエスケープを押したときなどの1つの条件がある場合（27はエスケープのキーコードです）

 <form ng-keydown=" event.which=== 27?cancelSplit():0">
....
</form>
于 2016-09-19T08:58:31.497 に答える