অ্যাঙ্গুলারজেএস দিয়ে এন্টার টিপে ফর্ম জমা দিন

Question

এই বিশেষ ক্ষেত্রে, আমি এন্টার টিপলে এই ইনপুটগুলিকে কোনও ফাংশন কল করার জন্য আমার কাছে কী বিকল্প রয়েছে?

// HTML view //
<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');
    };
}])

Answer 1

কৌণিক এটি বাক্সের বাইরে সমর্থন করে। আপনি কি আপনার ফর্ম উপাদানটিতে এনজিএস জমা দেওয়ার চেষ্টা করেছেন ?

<form ng-submit="myFunc()" ng-controller="mycontroller">
   <input type="text" ng-model="name" />
    <br />
    <input type="text" ng-model="email" />
</form>

সম্পাদনা: সাবমিট বাটন সম্পর্কিত মন্তব্য অনুসারে, জমা বোতাম ছাড়াই এন্টার টিপে একটি ফর্ম জমা দেওয়া দেখুন যা এর সমাধান দেয়:

<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>

আপনি যদি লুকানো সাবমিট বাটন সমাধানটি পছন্দ না করেন তবে আপনার কীপ্রেস বা কীপস ইভেন্টটি প্রবেশ করুন একটি নিয়ামক ফাংশন আবদ্ধ করতে হবে। এটি সাধারণত কাস্টম নির্দেশিকা প্রয়োজন, কিন্তু AngularUI লাইব্রেরিতে একটি দুর্দান্ত কীপ্রেস সমাধান ইতিমধ্যে সেট আপ করা আছে। Http://angular-ui.github.com/ দেখুন

কৌণিক ইউআই লাইব যুক্ত করার পরে, আপনার কোডটি এমন কিছু হবে:

<form ui-keypress="{13:'myFunc($event)'}">
  ... input fields ...
</form>

অথবা আপনি প্রতিটি পৃথক ক্ষেত্রে এন্টার কী চাপতে পারেন।

এছাড়াও, একটি সাধারণ কীপ্রেস নির্দেশিকা তৈরি করার জন্য এই এসও প্রশ্নগুলি দেখুন: আমি কৌনিক জেএস-এ কী কীভাবে সনাক্ত করতে পারি?

সম্পাদনা (2014-08-28): এই উত্তরটি যখন লেখা হয়েছিল তখন এনজিও-কী-প্রেস / এনজি-কীআপ / এনজি-কীডাউন অ্যাঙ্গুলারজেএস-এ স্থানীয় নির্দেশিকা হিসাবে উপস্থিত ছিল না। নীচের মন্তব্যে @ ডার্লান-আলভেসের সাথে একটি দুর্দান্ত সমাধান রয়েছে:

<input ng-keyup="$event.keyCode == 13 && myFunc()"... />

Comments

এটি কেবলমাত্র যদি ফর্মের ভিতরে আমার কাছে জমা বোতাম থাকে তবে এটি কাজ করে।

— আলি

এছাড়াও মনে রাখবেন যে এটি হ'ল <রূপ> এটি << কিছু এলিমেন্ট এনজি-ফর্ম = "" ...> এ কাজ করছে বলে মনে হয় না যা আমি ব্যবহার করতে চাই।

— জন কালভিনার

কেবল একটি নোট রেখে যাচ্ছেন: আপনি যদি এখানেই এসে শেষ করেন এবং জমা দিন বোতামগুলি আপনার পক্ষে কাজ করে না, আপনি আপনার জমা ফাংশনটির জন্য একটি খারাপ নাম ব্যবহার করতে পারেন। আমি নির্বোধভাবে ng-submit="join()"এমন একটি নিবন্ধকরণ নিয়ামক ব্যবহার করছি যা $scope.join = function() {...}সেই ফাংশনের নামটি পরিবর্তন foo()করে আবার এন্টার-বোতাম জমা দেওয়ার কাজ শুরু করে।

— পরীক্ষক

যে সময় এই উত্তরটি লেখা হয়েছিল,

— এনগি

ng-keyup="$event.keyCode == 13 && myFunc()"সত্যিই সন্ত্রস্ত :)

— Gonchar Denys

Answer 2

আপনি যদি ফর্ম ছাড়াই ফাংশনটিতে কল করতে চান তবে আপনি আমার এনজিএন্টার নির্দেশটি ব্যবহার করতে পারেন:

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

angular.module('yourModuleName').directive('ngEnter', function() {
        return function(scope, element, attrs) {
            element.bind("keydown keypress", function(event) {
                if(event.which === 13) {
                    scope.$apply(function(){
                        scope.$eval(attrs.ngEnter, {'event': event});
                    });

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

এইচটিএমএল :

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

আমি অন্যদের সন্ত্রস্ত নির্দেশনা জমা আমার টুইটার এবং আমার সারকথা অ্যাকাউন্ট ।

Comments

আপনার পৃষ্ঠায় থাকাকালীন যে কোনও সময় তারা এন্টার চাপলে ট্রিগার করার জন্য এটি পাওয়ার কোনও চতুর উপায় আছে?

— ডেরেক অ্যাডায়ার

@ এপোক্ক আমি পুরো ফর্মের জন্য প্রবেশ কীটি অক্ষম করতে চাই, আমি কীভাবে এটি করতে পারি? (আমি প্রবেশের সাথে ফর্ম জমা দেওয়া এড়াতে চাই)

— আন্তোনিও ম্যাক্স

খুব সুন্দর, তবে অ্যাঙ্গুলারজেসের পুনরুদ্ধার অনুসারে, কোনও অফিসিয়াল প্রকাশের পরে একই নামটি ব্যবহার করা হলে, আপনাকে এনজিও-সহ উপস্থাপিত নির্দেশনা, পরিষেবা বা ফিল্টার তৈরি করা উচিত নয়।

— নীল এস

দুর্দান্ত সমাধান। আমি সবেমাত্র কী-বাইন্ড এবং এই লাইনটির নামটি "যদি (ইভেন্ট.বিউচ === 13) changed" এই "" ("(ইভেন্ট.হিভি === সংখ্যা (অ্যাটর্স.কি)) - এ পরিবর্তন করেছি And" এবং তারপরে আমার ইনপুট "< ইনপুট টাইপ = "পাঠ্য" বাইন্ড-কী = "doSomething ()" কী = "13"> "যাতে আমি এটি বিভিন্ন কী ইভেন্টগুলির জন্য পুনরায় ব্যবহার করতে পারি।

— ব্রায়ান এফ

গুরুত্বপূর্ণ: কমা ছাড়াই keydownএবং keypressইভেন্টগুলিকে উভয়ই সীমাবদ্ধ করে যোগ করার অর্থ উভয়ই একই সাথে আগুন লাগতে পারে। এটি সম্ভবত $ রুটস্কোপ: ইনপাগ ত্রুটিগুলি স্পোন করে। তাদের মধ্যে কমা যুক্ত করা একটি বিচ্ছিন্নতা তৈরি করে এবং কেবলমাত্র ডাইজেস্ট চক্রটি ঘটে তা নিশ্চিত করে। সম্পাদনাটি প্রয়োগ করা যায়নি কারণ এটি কেবল একটি একক চরিত্র character

— রায়ান মিলার

Answer 3

আপনার যদি কেবল একটি ইনপুট থাকে তবে আপনি ফর্ম ট্যাগটি ব্যবহার করতে পারেন।

<form ng-submit="myFunc()" ...>

আপনার যদি একাধিক ইনপুট থাকে বা আপনি ফর্ম ট্যাগটি ব্যবহার করতে না চান বা নির্দিষ্ট ক্ষেত্রের সাথে এন্টার-কী কার্যকারিতা সংযুক্ত করতে চান না, আপনি এটি নির্দিষ্ট ইনপুটটিতে নিম্নরূপে ইনলাইন করতে পারেন:

<input ng-keyup="$event.keyCode == 13 && myFunc()" ...>

Comments

আপনার নিজের নির্দেশিকা না

— চার্লি মার্টিন

এমনকি আরও ছোট: <ইনপুট এনজি-কীআপ = "$ ইভেন্ট.কি কোড == 13 && myFunc ()" ... />

— ডার্লান আলভেস

দুর্দান্ত কাজ করে, আমি এনজি-কীআপের নির্দেশনাটি ব্যবহার করেছিলাম তবে এটির সাথে আমার একটি বড় সমস্যা রয়েছে, যদি আমার কেবল একটি পাঠ্য ক্ষেত্র থাকে তবে তিনি সম্পূর্ণ ফর্মটি (পোস্টব্যাক) জমা দেন তবে আমি তা চাই না। আমি ইতিমধ্যে এনজি-কীআপ = "$ ইভেন্ট.কিকোড == 13 &&TextBoxKeyUp ($ ইভেন্ট)" এবং "ইভেন্ট.প্রিভেন্টড্যাফল্ট ();" ফাংশনটিতে চেষ্টা করেছি, কিন্তু সাহায্য করি নি; (

— শার্পনিজাই

এটি সংক্ষিপ্ত তবে DRY পদ্ধতির বিষয়টি আমার মনে রেখেই আমি এখনও নির্দেশ তৈরি করব এবং এটি নির্দেশের সাথে ব্যবহার করব।

— অতুল চৌধুরী চৌধুরী

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

— বিশ্বজিৎ বাথারকর

Answer 4

আমি প্রদত্ত উত্তরের চেয়ে কিছুটা বেশি এক্সটেনসিবল / শব্দার্থক জিনিস চেয়েছিলাম তাই আমি একটি নির্দেশ লিখেছিলাম যা একটি জাভাস্ক্রিপ্ট অবজেক্টটি বিল্ট-ইন-তে একইভাবে নিয়ে যায় ngClass:

এইচটিএমএল

<input key-bind="{ enter: 'go()', esc: 'clear()' }" type="text"></input>

নির্দেশকের সুযোগের পরিপ্রেক্ষিতে অবজেক্টের মানগুলি মূল্যায়ন করা হয় - নিশ্চিত করুন যে সেগুলি একক উদ্ধৃতিতে আবদ্ধ রয়েছে অন্যথায় নির্দেশটি লোড করা হলে সমস্ত ফাংশন সম্পাদন করা হবে (!)

উদাহরণস্বরূপ: esc : 'clear()'পরিবর্তেesc : clear()

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

myModule
    .constant('keyCodes', {
        esc: 27,
        space: 32,
        enter: 13,
        tab: 9,
        backspace: 8,
        shift: 16,
        ctrl: 17,
        alt: 18,
        capslock: 20,
        numlock: 144
    })
    .directive('keyBind', ['keyCodes', function (keyCodes) {
        function map(obj) {
            var mapped = {};
            for (var key in obj) {
                var action = obj[key];
                if (keyCodes.hasOwnProperty(key)) {
                    mapped[keyCodes[key]] = action;
                }
            }
            return mapped;
        }

        return function (scope, element, attrs) {
            var bindings = map(scope.$eval(attrs.keyBind));
            element.bind("keydown keypress", function (event) {
                if (bindings.hasOwnProperty(event.which)) {
                    scope.$apply(function() {
                         scope.$eval(bindings[event.which]);
                    });
                }
            });
        };
    }]);

Comments

আমি যখন ফাংশনটিতে একটি স্ট্রিং ভেরিয়েবল যুক্ত করার চেষ্টা করি তখন আমি একটি আঙ্গুলারজ এইচটিএমএল পার্স ত্রুটি পাই। কী-বাইন্ড = "{প্রবেশ করান: 'vm.doTheThin (' myVar ')'}"

— মায়লার টেলর

এছাড়াও লক্ষ্য করেছি যে আমি যদি কোনও অবজেক্টের সাথে ভেরিয়েবল হিসাবে ফাংশন ব্যবহার করি তবে ফাংশনটি একাধিকবার ঘটে। আমি যখন এটি চালাব তখন নীচের কোডটি 2+ আইটেম সরিয়ে ফেলবে। কী-বাইন্ড = "{প্রবেশ করুন: 'vm.removeItem (আইটেম)'}"

— মায়লার টেলর

প্রথম ইস্যুর জন্য মেইলর টেলর, বিভিন্ন ধরণের উদ্ধৃতি ব্যবহার করুন'vm.doTheThing("myVar")'

— অ্যালেক্সফক্সগিল

Answer 5

আর একটি পদ্ধতির এনজি-কিপ্রেস ব্যবহার করা হবে,

<input type="text" ng-model="data" ng-keypress="($event.charCode==13)? myfunc() : return"> 

অ্যাঙ্গুলারজেএস - জেএসফিডাল দিয়ে এন্টার টিপুনতে একটি ইনপুট জমা দিন

Answer 6

শিফট + সহ এন্টার সাপোর্ট সহ খুব ভাল, পরিষ্কার এবং সাধারণ দিকনির্দেশনা:

app.directive('enterSubmit', function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            elem.bind('keydown', function(event) {
                 var code = event.keyCode || event.which;
                 if (code === 13) {
                       if (!event.shiftKey) {
                            event.preventDefault();
                            scope.$apply(attrs.enterSubmit);
                       }
                 }
            });
        }
    }
});

Answer 7

আপনি যদি ডেটা বৈধতা চান

<!-- form -->
<form name="loginForm">
...
  <input type="email" ng-keyup="$loginForm.$valid && $event.keyCode == 13 && signIn()" ng-model="email"... />
  <input type="password" ng-keyup="$loginForm.$valid && $event.keyCode == 13 && signIn()" ng-model="password"... />
</form>

এখানে গুরুত্বপূর্ণ সংযোজন $loginForm.$valid যা ফাংশন কার্যকর করার আগে ফর্মটি বৈধতা দেবে। আপনাকে বৈধতার জন্য অন্যান্য বৈশিষ্ট্য যুক্ত করতে হবে যা এই প্রশ্নের ক্ষেত্রের বাইরে।

শুভকামনা

Answer 8

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

এইচটিএমএল

<form ng-submit="myFunc()">
    <input type="text" name="username">
    <input type="submit" value="submit" ng-show="false">
</form>

Comments

+1 <button ng-show="false"></button>আরও খাটো। অদৃশ্য বোতামের মান সেট করার দরকার নেই।

— মুসা

এটি আমার বোঝা ছিল যে এনজি-সাবমিশন নির্দেশকে ট্রিগার করার জন্য, একটি ইনপুট type="submit"... আমি মনে করি মানটিকে উপেক্ষা করা যেতে পারে তবে আমি বিশ্বাস করি যে পূর্ববর্তীটি প্রয়োজনীয়।

— ল্যান্ডস্কো

Answer 9

এনজি-সাবমিট ব্যবহার করুন এবং কেবলমাত্র দুটি ফর্ম ট্যাগগুলিতে আলিঙ্গন করুন:

<div ng-controller="mycontroller">

  <form ng-submit="myFunc()">
    <input type="text" ng-model="name" <!-- Press ENTER and call myFunc --> />
  </form>

  <br />

  <form ng-submit="myFunc()">
    <input type="text" ng-model="email" <!-- Press ENTER and call myFunc --> />
  </form>

</div>

প্রতিটি ইনপুট ক্ষেত্রকে তার নিজস্ব ফর্ম ট্যাগে মোড়ানো ENTER কে উভয় ফর্মের মধ্যে জমা দেওয়ার অনুরোধ জানায়। আপনি যদি উভয়ের জন্য একটি ফর্ম ট্যাগ ব্যবহার করেন তবে আপনাকে একটি জমা বোতাম অন্তর্ভুক্ত করতে হবে।

Answer 10

ইনলাইন স্টাইলগুলি পুনরাবৃত্তি করার পরিবর্তে একটি সিএসএস ক্লাস ব্যবহার করে কিছুটা নিচু হবে।

সিএসএস

input[type=submit] {
    position: absolute;
    left: -9999px;
}

এইচটিএমএল

<form ng-submit="myFunc()">
    <input type="text" ng-model="name" />
    <br />
    <input type="text" ng-model="email" />
    <input type="submit" />
</form>

Answer 11

এফডব্লিউআইডাব্লু - এখানে কোনও নির্দেশনা নেই যা আমি কোনও মৌলিক নিশ্চিতকরণ / সতর্কতা বুটস্ট্র্যাপ মডালের জন্য ব্যবহার করেছি, এটির কোনও প্রয়োজন ছাড়াই <form>

(আপনি যা যা চান তার জন্য কেবল jQuery ক্লিক ক্রিয়াটি স্যুইচ আউট করুন data-easy-dismissএবং আপনার মডেল ট্যাগে যুক্ত করুন)

app.directive('easyDismiss', function() {
    return {
        restrict: 'A',
        link: function ($scope, $element) {

            var clickSubmit = function (e) {
                if (e.which == 13) {
                    $element.find('[type="submit"]').click();
                }
            };

            $element.on('show.bs.modal', function() {
                $(document).on('keypress', clickSubmit);
            });

            $element.on('hide.bs.modal', function() {
                $(document).off('keypress', clickSubmit);
            });
        }
    };
});