it-swarm.dev

كيفية استخدام حدث keypress في AngularJS؟

أريد أن ألتقط الحدث الصحفي key 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 
}
396
Venkata Tata

تحتاج إلى إضافة directive ، مثل هذا:

Javascript :

app.directive('myEnter', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                scope.$apply(function (){
                    scope.$eval(attrs.myEnter);
                });

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

HTML:

<div ng-app="" ng-controller="MainCtrl">
    <input type="text" my-enter="doSomething()">    
</div>
797
EpokK

البديل هو استخدام التوجيه القياسي ng-keypress="myFunct($event)"

ثم في وحدة التحكم الخاصة بك يمكن أن يكون لديك:

...

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

...
334
Chris Reynolds

أبسط مقاربي باستخدام التوجيه الزاوي فقط:

ng-keypress أو ng-keydown أو ng-keyup.

عادة ، نريد إضافة دعم لوحة المفاتيح لشيء تم التعامل معه بالفعل عن طريق النقر فوق ng.

على سبيل المثال:

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

الآن ، دعونا نضيف دعم لوحة المفاتيح.

الزناد عن طريق إدخال مفتاح:

<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

165
Eric Chen

بديل بسيط آخر:

<input ng-model="edItem" type="text" 
    ng-keypress="($event.which === 13)?foo(edItem):0"/>

والبديل ng-ui:

<input ng-model="edItem" type="text" ui-keypress="{'enter':'foo(edItem)'}"/>
101
Rodolfo Jorge Nemer Nogueira

إليك ما اكتشفته عندما كنت بصدد إنشاء تطبيق بمتطلبات مماثلة ، ولا يتطلب الأمر كتابة توجيه وبساطة نسبية لمعرفة ما الذي يفعله:

<input type="text" ng-keypress="($event.charCode==13)?myFunction():return" placeholder="Will Submit on Enter">
19
marcinzajkowski

يمكنك استخدام 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 :)
    }
}
15
Fineas

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');
    }
};
4
Jose Durley Lancheros

يمكنك أيضًا تطبيقه على وحدة تحكم على عنصر أصل. يمكن استخدام هذا المثال لتمييز صف في جدول بالضغط على مفاتيح الأسهم لأعلى/لأسفل.

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>
3
will Farrell

محاولة

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

لم يفعل شيئا بالنسبة لي.

Strangley العينة في https://docs.angularjs.org/api/ng/directive/ngKeypress ، والذي يعمل ng-keypress = "count = count + 1" ، يعمل.

لقد وجدت حلاً بديلاً ، يحتوي على الضغط على مفتاح الإدخال (Enter) لاستدعاء النقر فوق الزر الخاص بالزجاج.

<input ng-model="..." onkeypress="if (event.which==13) document.getElementById('button').click()"/>
<button id="button" ng-click="doSomething()">Done</button>
3
snaran
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Informe your name:<input type="text" ng-model="pergunta" ng-keypress="pressionou_enter($event)" ></input> 
<button ng-click="chamar()">submit</button>
<h1>{{resposta}}</h1> 
</div>
<script>
var app = angular.module('myApp', []);
//create a service mitsuplik
app.service('mitsuplik', function() {
    this.myFunc = function (parametro) {
        var tmp = ""; 
        for (var x=0;x<parametro.length;x++)
            {
            tmp = parametro.substring(x,x+1) + tmp;
            } 
        return tmp;
    }
});
//Calling our service
app.controller('myCtrl', function($scope, mitsuplik) { 
  $scope.chamar = function() { 
        $scope.resposta = mitsuplik.myFunc($scope.pergunta); 
    };
  //if mitsuplik press [ENTER], execute too
  $scope.pressionou_enter = function(keyEvent) {
             if (keyEvent.which === 13) 
                { 
                $scope.chamar();
                }

    }
});
</script>
</body>
</html>
2
Marcus Poli

هذا ملحق على إجابة EpokK.

واجهت نفس المشكلة المتمثلة في الحاجة إلى استدعاء وظيفة نطاق عندما يتم الضغط على إدخال في حقل الإدخال. ومع ذلك أردت أيضًا تمرير قيمة حقل الإدخال إلى الوظيفة المحددة. هذا هو الحل الخاص بي:

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 لإجابته.

2
tassaert.l

ماذا عن هذا؟:

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

الآن عند الضغط على مفتاح الإدخال بعد كتابة شيء ما في مدخلاتك ، فإن النموذج يعرف كيفية التعامل معه.

1
Juan Moreno

أعتقد أن استخدام document.bind أكثر أناقة قليلاً

constructor($scope, $document) {
  var that = this;
  $document.bind("keydown", function(event) {
    $scope.$apply(function(){
      that.handleKeyDown(event);
    });
  });
}

للحصول على المستند إلى مُنشئ وحدة التحكم:

controller: ['$scope', '$document', MyCtrl]
0
FreshPow
(function(angular) {
  'use strict';
angular.module('dragModule', [])
  .directive('myDraggable', ['$document', function($document) {
    return {
      link: function(scope, element, attr) {
         element.bind("keydown keypress", function (event) {
           console.log('keydown keypress', event.which);
            if(event.which === 13) {
                event.preventDefault();
            }
        });
      }
    };
  }]);
})(window.angular);
0
Mukundhan

مثال على الكود الذي قمت به لمشروعي. في الأساس تقوم بإضافة علامات إلى كيانك. تخيل أن لديك نص إدخال ، وعند إدخال اسم العلامة ، ستحصل على قائمة منسدلة مع علامات محمّلة مسبقًا للاختيار من بينها ، ويمكنك التنقل باستخدام الأسهم وتحديد باستخدام إدخال:

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 + Bootstrap 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;
}
0
Dmitri Algazin

لقد تأخرت قليلاً .. لكنني وجدت حلاً أبسط باستخدام auto-focus .. وقد يكون ذلك مفيدًا للأزرار أو غيرها عند ظهور dialog:

<button auto-focus ng-click="func()">ok</button>

يجب أن يكون ذلك جيدًا إذا كنت ترغب في الضغط على الزر onSpace أو إدخال النقرات.

0
Abdellah Alaoui

هنا توجيهي:

mainApp.directive('number', function () {
    return {
        link: function (scope, el, attr) {
            el.bind("keydown keypress", function (event) {
                //ignore all characters that are not numbers, except backspace, delete, left arrow and right arrow
                if ((event.keyCode < 48 || event.keyCode > 57) && event.keyCode != 8 && event.keyCode != 46 && event.keyCode != 37 && event.keyCode != 39) {
                    event.preventDefault();
                }
            });
        }
    };
});

الاستعمال:

<input number />
0
WtFudgE

يمكنك استخدام ng-keydown ، ng-keyup ، ng-press مثل هذا.

لتحريك وظيفة:

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

أو إذا كان لديك حالة واحدة مثل الضغط على مفتاح الهروب (27 هو رمز المفتاح للهروب)

 <form ng-keydown=" event.which=== 27?cancelSplit():0">
....
</form>
0
Eassa Nassar