অ্যাঙ্গুলারজেএস-এ কী কী চাপড়ানোর ইভেন্টটি ব্যবহার করবেন?

Question

আমি নীচের পাঠ্যবক্সে এন্টার কী প্রেস ইভেন্টটি ধরতে চাই। এটি আরও স্পষ্ট করার জন্য আমি ng-repeatএকটিকে টবডি তৈরি করতে ব্যবহার করছি । এইচটিএমএল:

<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 
}

Comments

কোনও ফর্মের ভিতরে ইনপুটটি কি?

— কলমেকাটুটি

না .. এটি একটি টেবিলে !!

— ভেঙ্কটা টাটা

Answer 1

আপনাকে এর directiveমতো একটি যুক্ত করতে হবে :

জাভাস্ক্রিপ্ট :

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();
            }
        });
    };
});

এইচটিএমএল :

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

Comments

@ ডেরেকএডায়ার নির্দেশটি সেই উপাদানটির ইভেন্ট keydownএবং keypressইভেন্টগুলির সাথে আবদ্ধ । ইভেন্টটি প্রাপ্ত হয়ে গেলে সরবরাহিত অভিব্যক্তিটি একটি $applyব্লকের ভিতরে মূল্যায়ন করা হয় ।

— পিট মার্টিন

এর মতো কীটি সংজ্ঞায়িত করা আরও সুরক্ষিত: var key = typeof event.which === "undefined" ? event.keyCode : event.which;যতক্ষণ না ইভেন্ট wh যা প্রতিটি ব্রাউজার দ্বারা ব্যবহৃত হয় না। মন্তব্যগুলি এখানে দেখুন: stackoverflow.com/a/4471635/2547632

— গ্যাব্রিয়েল

আমি keyupবাইন্ড টেস্টেও যুক্ত করব

— ব্যবহারকারীর 1713964

এছাড়াও মনে রাখবেন যে এনজি উপসর্গ ব্যবহার করার পরামর্শ দেওয়া হয় না, কারণ এটি ভবিষ্যতের এনজি- * নির্দেশাবলীর সাথে সংঘর্ষে আসতে পারে। পরিবর্তে আপনার নিজের ব্যবহার করুন

— মারিয়াস বালিয়েটিস

আপনার বাইন্ডিংগুলি ধ্বংস করতে ভুলবেন না: সুযোগ $ অন ('$ ধ্বংস', ফাংশন () {এলিমেন্ট.উনবাইন্ড ('কীডাউন');})

— নবলবার্গস

Answer 2

একটি বিকল্প হ'ল মান নির্দেশিকা ব্যবহার করা ng-keypress="myFunct($event)"

তারপরে আপনার নিয়ামকটিতে আপনি থাকতে পারেন:

...

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

...

Comments

অন্যান্য লোকদের কিছুটা সময় বাঁচাতে ng-keypress, কৌণিক 1.0.x এর অংশ বলে মনে হচ্ছে না ui-keypress(কিছুটা ভিন্ন কলিং শব্দার্থবিজ্ঞান সহ) যদিও উপলব্ধ রয়েছে: কৌণিক-ui.github.io/ui-utils

— সেবজির

আমি মনে করি এটির উপরে মন্তব্যটি একটি ভিন্ন উত্তরকে লক্ষ্য করে। (কেবলমাত্র রেফারেন্সের জন্য।)

— কর্নেলিয়াস

মার্টিন এটি আসলে একটি নিয়ামকের কাজ: ইউআই ইভেন্টগুলি পরিচালনা করতে।

— ট্রেভর ডি কোয়েকোয়েক

আরও ভাল, এনজিকিপ্রেস ব্যবহার করুন এবং $ ইভেন্টটি একটি কাস্টম ফিল্টারে পাস করুন।

— মার্টিন 19

সেরা উত্তর +1। আমি কেন আমার নিজস্ব নির্দেশনা তৈরি করব, যদি একটি থাকে তবে ইতিমধ্যে কৌণিকের অন্তর্ভুক্ত?

— বিফুনক

Answer 3

কেবল কৌনিক বিল্ট-ইন নির্দেশিকা ব্যবহার করে আমার সহজ পদ্ধতির:

ng-keypress, ng-keydownবা ng-keyup।

সাধারণত, আমরা এমন কোনও কি-বোর্ডের জন্য কীবোর্ড সমর্থন যুক্ত করতে চাই যা ইতিমধ্যে এনজি-ক্লিক দ্বারা পরিচালিত হয়।

এই ক্ষেত্রে:

<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>

কীকোড সম্পর্কে আরও:
কীকোড অবচিত হয়েছে তবে ভাল সমর্থিত API, আপনি তার পরিবর্তে সমর্থিত ব্রাউজারে ve evevt.key ব্যবহার করতে পারেন। Https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key এ
আরও দেখুন

Comments

গোপনীয় হ'ল পদ্ধতিটি কার্যকর করার আগে শর্তসাপেক্ষ $ ইভেন্ট wh যা === 13 && ক্রিয়া () - ধন্যবাদ!

— ব্যবহারকারী 12121234

'$ event.which' আমার পক্ষে কাজ করছে না, তবে আমি খুঁজে পেয়েছি '। event.keyCode' যা কাজ করছে।

— কার্ল অ্যাডলার

কীডাউন এবং কীপআপ আইই <9 এ অপরিবর্তিত রয়েছে ইভেন্ট।

— এরিক চেন

"

— আই

কেন তখন কেউ $ ইভেন্ট.কি কোড ব্যবহার করার জন্য কোড স্নিপেটগুলি আপডেট করেননি? আমি নিজে এটি সম্পাদনা করতাম তবে কোনও কারণে আমি অক্ষম হয়েছি।

— নাথান হ্যাজার্ড

Answer 4

আর একটি সহজ বিকল্প:

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

এবং এনজি-ইউআই বিকল্প:

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

Comments

এনজি-ইউআই এটি অস্পষ্ট, পরিবর্তে আপনার "ইউআই.ইউটিলেটস" বলতে হবে বা লিঙ্কটি ভাগ করা উচিত: কৌণিক-ui.github.io/ui-utils

— পাওলো অলিভিয়রা

ui-utils

— অবহেলিত

Answer 5

আমি যখন অনুরূপ প্রয়োজনের সাথে একটি অ্যাপ তৈরি করছিলাম তখন আমি যা অনুভব করেছি তা এখানে নির্দেশিকা লেখার দরকার নেই এবং এটি কী করে তা তুলনামূলক সহজ:

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

Comments

সহজ এবং কার্যকর।

— এক্সপ্লাউডার

Answer 6

আপনি এনজি-কীডাউন = " মাই ফাংশন ($ ইভেন্ট)" হিসাবে অ্যাট্রিবিউট হিসাবে ব্যবহার করতে পারেন ।

<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 :)
    }
}

Answer 7

এইচটিএমএল

<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');
    }
};

Answer 8

আপনি এটি প্যারেন্ট উপাদানগুলির একটি নিয়ামকের কাছেও প্রয়োগ করতে পারেন। এই উদাহরণটি টেবিলের উপরে / নীচে তীর কীগুলি টিপে সারিটি হাইলাইট করতে ব্যবহার করা যেতে পারে।

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>

Answer 9

চেষ্টা

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

আমার জন্য কিছুই করেনি

Https://docs.angularjs.org/api/ng/directive/ngKeypress এ নমুনাটি আঁকুন , যা এনজি-কিপ্রেস = "গণনা = গণনা + 1" করে, কাজ করে।

আমি একটি বিকল্প সমাধান পেয়েছি, যা এন্টার টিপে বোতামটির এনজি-ক্লিক ক্লিক করে।

<input ng-model="..." onkeypress="if (event.which==13) document.getElementById('button').click()"/>
<button id="button" ng-click="doSomething()">Done</button>

Comments

ng-keypress="console.log('foo')"আমার পক্ষেও কাজ করেনি তবে আপনি যদি করেন ng-keypress="fooMethod()"এবং আপনার নিয়ামক $scope.fooMethod = function() { console.log('fooMethod called'); }কাজ করেন তবে।

— গ্রাহামএফ

Answer 10

<!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>

Answer 11

এটি এপোকেকে উত্তর থেকে একটি এক্সটেনশন।

যখন কোনও ইনপুট ক্ষেত্রে এন্টার চাপানো হয় তখন স্কোপ ফাংশনটিতে কল করার ক্ষেত্রে আমার একই সমস্যা ছিল। তবে আমি ইনপুট ক্ষেত্রের মান নির্দিষ্ট ফাংশনেও পাস করতে চেয়েছিলাম । এটি আমার সমাধান:

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();
        }
    });
};

});

এইচটিএমএলে ব্যবহারটি নিম্নরূপ:

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

তার উত্তরের জন্য এপোককে কুডোস।

Comments

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

— অ্যাকানাদাল

Answer 12

এই সম্পর্কে কি?:

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

এখন যখন আপনি আপনার ইনপুটটিতে কিছু লেখার পরে এন্টার কী চাপুন, ফর্মটি কীভাবে এটি পরিচালনা করতে হবে তা জানে।

Comments

কীভাবে / কোথায় chat.sendMessage()সংজ্ঞায়িত করা হয়েছে

— অ্যারন ম্যাকমিলিন

Answer 13

কোডটির কিছু উদাহরণ যা আমি আমার প্রকল্পের জন্য করেছি। মূলত আপনি নিজের সত্তায় ট্যাগ যুক্ত করেন। আপনি কী ইনপুট পাঠ্য আছে তা কল্পনা করুন, ট্যাগ নাম লিখলে আপনি চয়ন করতে প্রিললোডড ট্যাগ সহ ড্রপ-ডাউন মেনু পান, আপনি তীরচিহ্ন দিয়ে নেভিগেট করে প্রবেশ দিয়ে নির্বাচন করুন:

এইচটিএমএল + 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);
};

সিএসএস + বুটস্ট্র্যাপ 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;
}

Comments

আমি মনে করি এটি একটি বাজে সমাধান। কোনও নিয়ামককে কীপ্রেসের মতো ইউআই জিনিসগুলি পরিচালনা করা উচিত নয়।

— মায়া ক্যাটরিন অ্যান্ডারসন

এই উত্তরটিতে "শোরগোল" অনেকগুলি রয়েছে, এমনভাবে কথা বলার পদ্ধতিতে, যা অনেকগুলি মার্কআপ ধারণ করে - যতটা আমি এক নজরে দেখতে পাচ্ছি - হস্তে আসল প্রশ্নের সাথে সম্পর্কিত নয়। উত্তরে কোডটি ঘনীভূত করতে এবং সংক্ষিপ্ত / জেএসফিডল / প্লেনক্রিতে পুরো উদাহরণ সরবরাহ করা আরও সংক্ষিপ্ত / কার্যকর হতে পারে।

— কর্নেলিয়াস

@ মার্টিনএন্ডারসেন, কৌনিক অ্যাপে একটি কিপ্রেস কোথায় পরিচালনা করা উচিত?

— ইমানেগক্স ২

আমি এখন এটি তাকান যখন এটি ঠিক আছে। এটি মূলত কী কী চাপগুলি সবসময় জেএস ইভেন্টের মডেলের সাথে পরিচালিত হয়।

— মায়া ক্যাটরিন অ্যান্ডারসন 21

Answer 14

আমি কিছুটা দেরি করেছি .. তবে আমি ব্যবহার করে একটি সহজ সমাধান পেয়েছি auto-focus.. এটি পপ করার সময় এটি বোতাম বা অন্যগুলির জন্য কার্যকর হতে পারে dialog:

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

যদি আপনি onস্পেস বা ক্লিক ক্লিক করে বাটনটি চাপতে চান তবে তা ঠিক হওয়া উচিত ।

Comments

প্রশ্নটি এন্টার টিপুন এবং কিছু করার বিষয়ে।

— ব্লেশডো

Answer 15

আমার নির্দেশ এখানে:

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 />

Answer 16

আপনি এনজি-কীডাউন, এনজি-কীআপ, এনজি-প্রেস যেমন ব্যবহার করতে পারেন।

একটি ফাংশন ট্রিগার:

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

অথবা আপনার যদি কোনও ধারণা থাকে যেমন সে যখন পালাতে চাপায় (27 পলায়নের মূল কোডটি)

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

Answer 17

আমার মনে হয় ডকুমেন্ট.বাইন্ড ব্যবহার করা কিছুটা মার্জিত

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

নিয়ামক কনস্ট্রাক্টরের কাছে নথি পেতে:

controller: ['$scope', '$document', MyCtrl]

Answer 18

(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);

Answer 19

ইভেন্টটি পেতে আপনাকে যা করতে হবে তা হ'ল:

console.log(angular.element(event.which));

কোনও নির্দেশিকা এটি করতে পারে, তবে আপনি এটি এটি করেন না।