এন্টার টিপে ব্যবহারকারীদের ফর্ম জমা দেওয়া থেকে বিরত করুন


772

আমার একটি ওয়েবসাইটে একটি সমীক্ষা রয়েছে এবং ব্যবহারকারীরা প্রবেশের (হানা কেন জানি না) আঘাত করে এবং দুর্ঘটনাক্রমে জমা বোতামটি ক্লিক না করে জরিপটি (ফর্ম) জমা দেওয়ার ক্ষেত্রে কিছু সমস্যা রয়েছে বলে মনে হচ্ছে। এই সমস্যা এড়ানোর জন্য একটি উপায় আছে কি?

আমি সমীক্ষায় এইচটিএমএল, পিএইচপি 5.2.9 এবং jQuery ব্যবহার করছি।


2
ফর্ম ট্যাগ ব্যবহার করবেন না এবং কাস্টম অজ্যাক্স অনুরোধ করবেন না :) তবে নিশ্চিত, আপনি কী-শ্রবণ এবং প্রতিরোধের পদ্ধতির সাথে এগিয়ে যেতে পারেন, আমি
এটিই করছিলাম

আমি কেবল ফর্ম ট্যাগগুলি ব্যবহার করি না কারণ আমি অপ্রচলিত উপায়ে অ্যাজাক্স অনুরোধের মাধ্যমে ফর্মগুলি প্রক্রিয়াকরণ করতে পছন্দ করি (যেমন: কিছু ক্ষেত্রগুলি তাদের ফোকাস বাদ দেওয়া হিসাবে জমা দেওয়া ইত্যাদি)। আপনি কী টিপুন কী চাপতে এবং এটি করতে চাইলে কেবল এটি প্রক্রিয়া করতে একটি বিশেষ শ্রোতা তৈরি করতে পারেন।
জুয়ান

উত্তর:


881

আপনি যেমন একটি পদ্ধতি ব্যবহার করতে পারেন

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

মূল পোস্টে মন্তব্যগুলি পড়তে, এটিকে আরও ব্যবহারযোগ্য করে তোলার জন্য এবং লোকেরা Enterযদি সমস্ত ক্ষেত্রটি সম্পূর্ণ করে থাকে তবে তাদের টিপতে দেওয়া হবে:

function validationFunction() {
  $('input').each(function() {
    ...

  }
  if(good) {
    return true;
  }
  return false;
}

$(document).ready(function() {
  $(window).keydown(function(event){
    if( (event.keyCode == 13) && (validationFunction() == false) ) {
      event.preventDefault();
      return false;
    }
  });
});

7
আমি বর্তমানে কেবলমাত্র দ্রুত সমাধানের সন্ধান করছি, এবং বৈধতা আইটেমগুলি প্রয়োগ করার জন্য সময় নেই। আমি প্রত্যেকের জবাবকে প্রশংসা করি, তবে মধ্যবর্তী সময়ে এটিই আমি নিয়ে যাচ্ছি। ধন্যবাদ.
ডিফোর্ড 42

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

3
আমি এমন পরিস্থিতি দেখেছি (কেবলমাত্র ইন্টারনেট এক্সপ্লোরার) যেখানে keydownএটি কাজ করার জন্য আপনার documentপরিবর্তে বাঁধাই করা দরকার window
মার্টিন এইচ

8
আপনি && !$(document.activeElement).is('textarea')শর্তটি যুক্ত করতে চাইতে পারেন , না হলে টেক্সারিয়ার ভিতরে থাকা নতুন লাইনগুলি অবরুদ্ধ করা হয় (অন্তত IE তে)।
ফ্ল্যাশ করুন

1
এটি আমার পক্ষে কাজ করে। তবে এটি টেক্সেরিয়ায় ব্রেক লাইন যুক্ত করতে বাধা দেয়।
César

612

কোথাও কী প্রবেশ করানোর অনুমতি দিন

যদি <textarea>আপনার ফর্মটিতে না থাকে তবে কেবল নিম্নলিখিতটি আপনারটিতে যুক্ত করুন <form>:

<form ... onkeydown="return event.key != 'Enter';">

বা jQuery সহ:

$(document).on("keydown", "form", function(event) { 
    return event.key != "Enter";
});

এর ফলে ফর্মের অভ্যন্তরে প্রতিটি কী টিপুন পরীক্ষা করা হবে key। যদি এটি না হয় Enter, তবে এটি ফিরে আসবে trueএবং যথারীতি কিছু চলতে থাকবে। যদি এটি হয় Enterতবে তা ফিরে আসবে falseএবং কিছু তত্ক্ষণাত বন্ধ হয়ে যাবে, সুতরাং ফর্মটি জমা দেওয়া হবে না।

keydownঘটনা উপর পছন্দ করা হয় keyupযেমন keyupব্লক ফর্ম দেরি জমা হয়। .তিহাসিকভাবে সেখানেও ছিল keypress, তবে এটি হ্রাস করা হয়েছে, যেমনটি রয়েছে KeyboardEvent.keyCodeKeyboardEvent.keyপরিবর্তে আপনার ব্যবহার করা উচিত যা চেপে থাকা কীটির নামটি দেয়। যখন Enterচেক করা হয়, তারপরে এটি 13 (সাধারণ প্রবেশ) পাশাপাশি 108 (নামপ্যাড এন্টার) চেক করবে।

মনে রাখবেন যে আইআই <= 8 এর জন্য / এর $(window)পরিবর্তে অন্য কোনও উত্তরে প্রস্তাবিত হিসাবে পরামর্শ দেওয়া হয়েছে , সুতরাং আপনি যদি এই দরিদ্র ব্যবহারকারীদেরও আচ্ছাদন করতে চান তবে এটি ভাল পছন্দ নয়।$(document)keydownkeyup

কেবল টেক্সারিয়াসে কী প্রবেশের অনুমতি দিন

আপনার যদি <textarea>আপনার ফর্মটিতে (অবশ্যই কোনটি কী কী গ্রহণ করা উচিত ) থাকে, তবে প্রতিটি স্বতন্ত্র ইনপুট উপাদানগুলিতে কীডাউন হ্যান্ডলার যুক্ত করুন যা একটি নয় <textarea>

<input ... onkeydown="return event.key != 'Enter';">
<select ... onkeydown="return event.key != 'Enter';">
...

বয়লারপ্লেট হ্রাস করতে, jQuery দিয়ে করা ভাল better

$(document).on("keydown", ":input:not(textarea)", function(event) {
    return event.key != "Enter";
});

যদি আপনি সেই ইনপুট উপাদানগুলিতে অন্য ইভেন্ট হ্যান্ডলার ফাংশনগুলি সংযুক্ত থাকেন, যা আপনি কোনও কারণে enter কীতেও চাইছেন তবে কেবলমাত্র মিথ্যা প্রত্যাবর্তনের পরিবর্তে ইভেন্টের ডিফল্ট আচরণকে রোধ করুন, যাতে এটি অন্যান্য হ্যান্ডলারের কাছে সঠিকভাবে প্রচার করতে পারে।

$(document).on("keydown", ":input:not(textarea)", function(event) {
    if (event.key == "Enter") {
        event.preventDefault();
    }
});

টেক্সারিয়াসে কী প্রবেশ করতে অনুমতি দিন এবং কেবল বোতাম জমা দিন

আপনি যদি সাবমিট বাটনগুলিতে কী কী প্রবেশের অনুমতি দিতে চান তবে নীচের মত আপনি <input|button type="submit">সর্বদা নির্বাচককে পরিমার্জন করতে পারেন।

$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {
    // ...
});

মনে রাখবেন যে input[type=text]অন্য কয়েকটি উত্তরে যেমন পরামর্শ দেওয়া হয়েছে সেই HTML5 নন-পাঠ্য ইনপুটগুলি কভার করে না, সুতরাং এটি কোনও ভাল নির্বাচক নয়।


11
এটি একটি ভাল উত্তর হওয়া উচিত কারণ এটি টেক্সেরিয়া সহ ফর্মের সাথেও আলোচনা করে এবং ইভেন্টের প্রচারকে আরও ভালভাবে ব্যাখ্যা করে
foobar

6
":input:not(textarea):not([type=submit]):not(button)"যদি আপনি এর <button>পরিবর্তে ব্যবহার করছেন<input type=submit>
সাইমন_উইভার

এটি টেক্সারিয়া ব্যতীত অন্য কোনও ইনপুটটিতে কাজ করা থেকে বাধা দেয়। এটি কোনও ভাল সমাধান নয়
mate.gwozdz

আগে কোলন হওয়ার কথা আছে input?
xfactorial

1
@ যোদাডকোদা: সম্মত এবং সমন্বিত
বালুস সি

109

বিভাগ 4.10.22.2 ডাব্লু 3 সি এইচটিএমএল 5 স্পষ্টের অন্তর্ভুক্ত জমাটি বলছে:

একটি formউপাদান এর ডিফল্ট বোতাম প্রথম বোতাম জমা মধ্যে গাছ অর্ডার যার ফর্মের মালিককে যে formউপাদান।

যদি ব্যবহারকারী এজেন্ট ব্যবহারকারীকে সূক্ষ্মভাবে একটি ফর্ম জমা দিতে দেয় (উদাহরণস্বরূপ, কিছু প্ল্যাটফর্মে কোনও পাঠ্য ক্ষেত্রটি ফর্মটি জমা দেওয়ার সময় "enter" কী টিপুন), তবে এমন ফর্মের জন্য এটি করা যার ডিফল্ট বোতামটির একটি সংজ্ঞায়িত অ্যাক্টিভেশন রয়েছে আচরণ করতে ইউজার এজেন্ট হতে হবে কৃত্রিম ক্লিক অ্যাক্টিভেশন পদক্ষেপ চালানোর যে ডিফল্ট বোতাম

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

সুতরাং, ফর্মের যে কোনও অন্তর্নিহিত জমা অক্ষম করার একটি মান-সম্মতিজনক উপায় হ'ল ফর্মের প্রথম জমা বোতাম হিসাবে অক্ষম জমা বোতামটি রাখুন:

<form action="...">
  <!-- Prevent implicit submission of the form -->
  <button type="submit" disabled style="display: none" aria-hidden="true"></button>

  <!-- ... -->

  <button type="submit">Submit</button>
</form>

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


5
ত্রুটি ... এটি শক্ত সোনার। যদি এটি সত্যিই ক্রস ব্রাউজারে কাজ করে তবে এটি শীর্ষে যাওয়ার যোগ্য! কীপ্রেস, কীডাউন ইত্যাদি ইত্যাদির দ্বারা এত লোক উত্তর দিতে পারে তবে এই মান ভিত্তিক উত্তরটি মিস করে?
জন রিস

3
একদিকে এটি সহজ এবং গৃহীত উত্তরের প্রস্তাবিত সমস্ত ক্ষতিগুলি প্রতিরোধ করে। অন্যদিকে, এটি স্ট্যান্ডার্ডের সামান্য শোষণের মতো অনুভব করে। Aria- * গুণাবলী অন্তর্ভুক্ত করার জন্য কুডোস। আমি এই সম্পর্কে আরও প্রতিক্রিয়া শুনতে পছন্দ করি।
সলভিটিগ

2
এছাড়াও হিসাবে কাজ করে <input type="submit" disabled style="display: none" aria-hidden="true" />এবং আপনি কয়েক অক্ষর দ্বারা আপনার পৃষ্ঠার আকার হ্রাস করতে পারেন। :
পি

7
IE 11 যাইহোক জমা দেয়।
ক্যামেরোএসএস

2
সাফারি নতুন আইই।
মোচড়িত পিক্সেল

68

ফর্মটি জমা দেওয়া থেকে বাঁচাতে আমাকে কী টিপে সম্পর্কিত তিনটি ইভেন্টই ধরতে হয়েছিল:

    var preventSubmit = function(event) {
        if(event.keyCode == 13) {
            console.log("caught ya!");
            event.preventDefault();
            //event.stopPropagation();
            return false;
        }
    }
    $("#search").keypress(preventSubmit);
    $("#search").keydown(preventSubmit);
    $("#search").keyup(preventSubmit);

আপনি উপরের সমস্তগুলি একটি দুর্দান্ত কমপ্যাক্ট সংস্করণে একত্রিত করতে পারেন:

    $('#search').bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });

7
আপনি হয় সর্বশেষ 3 নির্বাচককে শৃঙ্খলাবদ্ধ করতে পারেন বা একাধিক ইভেন্টকে এর মতো একটি পদ্ধতির সাথে আবদ্ধ করতে পারেন $("#search").bind('keypress keyup keydown',preventSubmit);
মোক

কারণ একটি এএসপি.এনইটি ওয়েব ফর্মটিতে একটি <form>ট্যাগে সমস্ত কিছু বাসাতে হবে , এন্টার কীটি ফর্মটি জমা দেবে ... এই সমাধানটি এন্টার কীটি অক্ষম করে দিয়েছে এবং সমস্যাটি ঠিক করেছে, ধন্যবাদ @ ডেভ! তারপরে আমি নির্দিষ্ট ক্ষেত্রগুলির জন্য এন্টার কীটি সক্ষম করেছিলাম id
আয়ান ক্যাম্পবেল

@ আপগ্রেডিং ডেভ "কনসোল.লগ ()" এর পরিবর্তে আপনি কীভাবে "লগ ()" লিখতে সক্ষম?
রেডবিএক্স

1
@ অ্যাডবিক্স ... ভাল ক্যাচ, এটি হওয়া উচিত console.log, আমি আমার উত্তর আপডেট করেছি।
আপগ্রেডডেভ

নোট করুন যে আপনার সাথে keypress keyup keydownযদি কোনও কোডটি if শর্তে দুবার ট্রিগার করে
কাই Noack

56

আপনি যদি সত্যিকারের জমা দেওয়ার জন্য কোনও স্ক্রিপ্ট ব্যবহার করেন, তবে আপনি অনসামিত হ্যান্ডলারটিতে "রিটার্ন মিথ্যা" লাইনটি যুক্ত করতে পারেন:

<form onsubmit="return false;">

জাভাস্ক্রিপ্ট থেকে ফর্মটিতে জমা () কল করা ইভেন্টটিকে ট্রিগার করবে না।


ক্রোমে আমার জন্য কাজ করে, এটি সাবমিট বোতামগুলিও অক্ষম করবে, আপনি যদি সাবমিট বাটনে নিজেই কোনও অন্লিক-ইভেন্টটি ট্রিগার করতে চান তবে তা ঠিক। আজাক্স ইঙ্গিত: ফেরতের আগে আপনার ফাংশন কলটি যুক্ত করুন এবং ব্যবহারকারী এখনও পৃষ্ঠাটিতে ফর্মটি জমা না দিয়ে এন্টার কীটিতে চাপ দিতে পারে।
ডেনিস হেইডেন

ক্রোম, আইই -11, এবং ফায়ারফক্সে আমার জন্য কাজ করেছিলাম এবং এটি কার্যকর করার সহজ সমাধান ছিল। পৃষ্ঠার পুরো বিভাগগুলিতে প্রবেশ কীটি অক্ষম করা, কিছু উত্তরের হিসাবে, এটি অত্যন্ত চরম এবং বাগের প্রবণ বলে মনে হচ্ছে।
রবার্তো

ধন্যবাদ. এটা আমার জন্য কাজ করে।
LU

23

ব্যবহার করুন:

$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
  if(e.keyCode == 13) {
    e.preventDefault();
    return false;
  }
});

এই সমাধানটি কেবলমাত্র Enterইনপুট পাঠ্যগুলিতে প্রতিরোধ করে কোনও ওয়েবসাইটে সমস্ত আকারে (আজাক্স সহ সন্নিবেশ করা ফর্মগুলিতে) কাজ করে । এটি একটি দস্তাবেজ প্রস্তুত ফাংশনে রাখুন, এবং এই সমস্যাটি একটি জীবনের জন্য ভুলে যান।


আমি মনে করি আসল উত্তরটি ঠিক e.whichছিল; এটিতে পরিবর্তন করার দরকার নেই e.keyCode। উভয়ই এন্টার কীটির জন্য 13 মান প্রদান করে। দেখুন stackoverflow.com/a/4471635/292060 এবং stackoverflow.com/a/18184976/292060
goodeye

2
এই সমাধানটি দুটি সমাধানের যত্ন করে: ১) প্রবেশের সময় ফর্মগুলি জমা করবেন না))
পাঠ্যগ্রহে

21

পরিবর্তে ব্যবহারকারীদের টিপতে বাধা দেয় Enter , যা অপ্রাকৃত বলে মনে হচ্ছে, আপনি ফর্মটি যেমনটি রেখে দিতে পারেন তেমন কিছু অতিরিক্ত ক্লায়েন্ট-সাইডের বৈধতা যুক্ত করতে পারেন: সমীক্ষাটি শেষ না হলে ফলাফলটি সার্ভারে প্রেরণ করা হয় না এবং ব্যবহারকারী একটি দুর্দান্ত বার্তা বলে দেয় ফর্মটি শেষ করতে কী শেষ করতে হবে। আপনি যদি jQuery ব্যবহার করে থাকেন তবে বৈধতা প্লাগইনটি ব্যবহার করে দেখুন:

http://docs.jquery.com/Plugins/Validation

Enterএটিতে বোতামটি ধরার চেয়ে আরও বেশি কাজের প্রয়োজন হবে তবে অবশ্যই এটি আরও সমৃদ্ধ ব্যবহারকারীর অভিজ্ঞতা সরবরাহ করবে।


13
এটি ভাল শোনাচ্ছে তবে fieldsচ্ছিক ক্ষেত্রগুলি সমস্যাযুক্ত, ব্যবহারকারী ভুল করে এন্টার চাপতে পারে এবং ফর্মটি জমা দেওয়া হবে। জরিপ শেষ না হলে আপনি কীভাবে জানতে পারবেন যে আপনি প্রয়োজনীয় প্রতিটি ক্ষেত্র না রেখে (কোনও ডিফল্ট পছন্দ নয়, কোনও ফাঁকা ক্ষেত্র অনুমোদিত নয় ...)
ক্রিস্টোফ রাউসি

19

একটি দুর্দান্ত সরল jQuery সমাধান:

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        return false;
    }
});

1
+1 আমি সাধারণ var key = event.keyCode || event.which; if (key == 13) return false;
জেএসের

1
টেকনিক্যালি এটি এখনও একটি সহজ জ্যাকুয়েরি মোড়ক দিয়ে POJ is আপনি যে কোডটি দিয়েছেন তা প্রায় একই জিনিস।
ইোনাসদান

19

আমি এখনও মন্তব্য করতে পারি না, তাই আমি একটি নতুন উত্তর পোস্ট করব

গৃহীত উত্তরটি ঠিক-ইশ, তবে নামপ্যাড প্রবেশের মাধ্যমে জমা দেওয়া বন্ধ করছিল না। কমপক্ষে ক্রোমের বর্তমান সংস্করণে। আমাকে এটিতে কীকোড শর্তটি পরিবর্তন করতে হয়েছিল, তবে এটি কাজ করে।

if(event.keyCode == 13 || event.keyCode == 169) {...}

5
এন্টার এবং রিটার্নের মধ্যে পার্থক্য - অনেকগুলি পয়েন্ট-অফ-বিক্রয় অপারেটরগুলি নামপ্যাড একচেটিয়াভাবে ব্যবহার করে। +1
Hellosrve

8
এখন (05-21-2015) , সাধারণ প্রবেশ এবং নামপ্যাড উভয় প্রবেশের জন্য, কীকোড 13 [ক্রোম 42, আইই 11, ফায়ারফক্স 36]
ক্লিফ বার্টন

15

লক্ষ্যে পৌঁছানো আমার সমাধান, এটি পরিষ্কার এবং কার্যকর।

$('form').submit(function () {
  if ($(document.activeElement).attr('type') == 'submit')
     return true;
  else return false;
});

13

সম্পূর্ণ ভিন্ন পদ্ধতির:

  1. <button type="submit">ফর্মের প্রথমটি টিপে সক্রিয় করা হবে Enter
  2. বোতামটি গোপন থাকলেও এটি সত্য style="display:none;
  3. এই বোতামটির জন্য স্ক্রিপ্টটি ফিরে আসতে পারে false , যা জমা দেওয়ার প্রক্রিয়াটি বাতিল করে।
  4. <button type=submit>ফর্মটি জমা দেওয়ার জন্য আপনার কাছে আর একটি থাকতে পারে। কেবল trueজমাটি জমায়েতে ফিরে আসুন।
  5. Enterআসল জমা বোতামটি কেন্দ্রীভূত হওয়ার সময় টিপলে আসল জমা দেওয়া বোতামটি সক্রিয় হবে।
  6. টিপলে Enterভিতরে <textarea>বা অন্যান্য ফর্ম নিয়ন্ত্রণ স্বাভাবিক হিসাবে আচরণ করবে।
  7. ফর্ম নিয়ন্ত্রণের Enterভিতরে টিপলে <input>প্রথমে ট্রিগার হবে <button type=submit>, যা ফিরে আসে falseএবং এভাবে কিছুই ঘটে না।

এভাবে:

<form action="...">
  <!-- insert this next line immediately after the <form> opening tag -->
  <button type=submit onclick="return false;" style="display:none;"></button>

  <!-- everything else follows as normal -->
  <!-- ... -->
  <button type=submit>Submit</button>
</form>

1
হুম, ক্রোম এবং ফায়ারফক্সে, একটি আরও ছোট সংস্করণ হবে <বোতাম অক্ষম শৈলী = "প্রদর্শন: কিছুই নয়;"> <বাটন>, এতে জেএসকে কাজ না করার গুণ রয়েছে। সাফারিটি কেবল বোতামটিকে উপেক্ষা করে এবং অন্যান্য জিনিসগুলি স্বাভাবিক হিসাবে ঘটবে।
এরিক্স

1
আমি "১৩ টি কীকোড উপেক্ষা" উপায়টি সত্যিই পছন্দ করি না, তাই আমি কিছু সহজ এবং কৌতুকপূর্ণ উপায়ে চিন্তা করতে শুরু করি এবং এই ধারণাটি আমার মনে আসে এবং আমি এই পৃষ্ঠাটি স্ক্রোল করার সময় আমি এই থ্রেডটি দেখেছি :)। পারস্পরিক ধারণা এবং অবশ্যই সেরা সমাধানের জন্য প্লাস ওয়ান।
জালালী শাকিব

আমার জন্য নিখুঁত উত্তর। আমি সিআইএলিকে অনুকরণ করার জন্য একটি ফর্ম চেয়েছিলাম যাতে ব্যবহারকারী প্রতিটি পরবর্তী ক্ষেত্রের জন্য এন্টার টিপুন এবং তারপরে শেষে একটি জমা দিন।
নাথান

ওহ উজ্জ্বল, দ্রুত ক্লিকগুলিতে সদৃশ <button onclick="this.disabled=true;this.form.submit();" type="submit"">submit</button>
জমাটি

@ আরশমূসাপুর দয়া করে জমা দেওয়ার বোতামগুলিকে ফোকাস থাকলে অক্ষম করবেন না - এটি করা ফোকাসকে ড্রপ করে এবং অ্যাক্সেসযোগ্যতার জন্য গোলযোগ।
এরিকস

9

ফর্মটিকে 'জাভাস্ক্রিপ্ট: অকার্যকর (0)' এর ক্রিয়া দেওয়া; কৌশলটি মনে হচ্ছে

<form action="javascript:void(0);">
<input type="text" />
</form>
<script>
$(document).ready(function() {
    $(window).keydown(function(event){
        if(event.keyCode == 13) {
    alert('Hello');
        }
    });
});
</script>

8

জমা দেওয়ার বোতাম না লাগানোই পারে। ইনপুটটিতে কেবল একটি স্ক্রিপ্ট রেখে (টাইপ = বোতাম) অথবা আপনি যদি ফর্মটিতে ডেটা জমা দিতে চান তবে ইভেন্টলিস্টনার যুক্ত করুন।

বরং এটি ব্যবহার করুন

<input type="button">

এটি ব্যবহার করার চেয়ে

<input type="submit">

8
  1. ইনপুট বা বোতামের জন্য টাইপ = "জমা দিন" ব্যবহার করবেন না ।
  2. ব্যবহারের টাইপ = "বোতাম" এবং ব্যবহার JS [jQuery / কৌণিক জন্য / etc] সার্ভারের সাথে ফর্মটি জমা দিতে।

7

আমার কেবলমাত্র নির্দিষ্ট ইনপুট জমা দেওয়া থেকে বাঁচানো দরকার, তাই আমি যেখানে ক্লাস সিলেক্টর ব্যবহার করেছি, যেখানেই আমার প্রয়োজন সেখানে এটি একটি "গ্লোবাল" বৈশিষ্ট্য হতে দেয়।

<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />

এবং এই jQuery কোড:

$('.idNoEnter').keydown(function (e) {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
});

বিকল্পভাবে, যদি কীডাউন অপর্যাপ্ত থাকে:

$('.idNoEnter').on('keypress keydown keyup', function (e) {
   if (e.keyCode == 13) {
     e.preventDefault();
   }
});

কিছু নোট:

এখানে বিভিন্ন ভাল উত্তর সংশোধন করে, Enterকীগুলি keydownসমস্ত ব্রাউজারে কাজ করবে বলে মনে হচ্ছে । বিকল্প জন্য, আমি আপডেট bind()করার on()পদ্ধতি।

আমি শ্রেণি নির্বাচকদের একটি বড় অনুরাগী, সমস্ত উপকারিতা এবং মতামত এবং পারফরম্যান্স আলোচনার বিষয়টি বিবেচনা করে। আমার নামকরণ কনভেনশনটি 'আইডিসোমিংথিং' ইঙ্গিত করে যে jQuery এটিকে আইডি হিসাবে ব্যবহার করছে, এটি সিএসএস স্টাইলিং থেকে আলাদা করতে।


এটি ফর্মের পাঠ্যবক্সের উপাদানগুলিতে কাজ করে। আপনি যেমন টাইপ করেন এবং পাঠ্যবক্সে এন্টার চাপলে ডিফল্ট আচরণ ফর্মটি জমা দেয়। এটি প্রবেশ কী বাধা দেয় এবং এটি জমা দেওয়া থেকে বাধা দেয়।
গোডেয়

5

Enterকীটি আঘাত পেয়েছে কিনা তা পরীক্ষা করতে এবং জমা দেওয়া বন্ধ করার জন্য আপনি একটি জাভাস্ক্রিপ্ট পদ্ধতি তৈরি করতে পারেন।

<script type="text/javascript">
  function noenter() {
  return !(window.event && window.event.keyCode == 13); }
</script>

জমা দেওয়ার পদ্ধতিতে কেবল এটি কল করুন।


4

শুধুমাত্র ব্লক সাবমিট করুন তবে অন্যান্য নয়, প্রবেশ কীটির গুরুত্বপূর্ণ কার্যকারিতা যেমন একটিতে নতুন অনুচ্ছেদ তৈরির মতো <textarea>:

window.addEventListener('keydown', function(event) {
  //set default value for variable that will hold the status of keypress
  pressedEnter = false;

  //if user pressed enter, set the variable to true
  if (event.keyCode == 13)
    pressedEnter = true;

  //we want forms to disable submit for a tenth of a second only
  setTimeout(function() {
    pressedEnter = false;
  }, 100)

})

//find all forms
var forms = document.getElementsByTagName('form')

//loop through forms
for (i = 0; i < forms.length; i++) {
  //listen to submit event
  forms[i].addEventListener('submit', function(e) {
    //if user just pressed enter, stop the submit event
    if (pressedEnter == true) {
      updateLog('Form prevented from submit.')
      e.preventDefault();
      return false;
    }

    updateLog('Form submitted.')
  })
}

var log = document.getElementById('log')
updateLog = function(msg) {
  log.innerText = msg
}
input,
textarea {
  display: inline-block;
  margin-bottom: 1em;
  border: 1px solid #6f6f6f;
  padding: 5px;
  border-radius: 2px;
  width: 90%;
  font-size: 14px;
}

input[type=submit] {
  background: lightblue;
  color: #fff;
}
<form>
  <p>Sample textarea (try enter key):</p>
  <textarea rows="4">Hit enter, a new line will be added. But the form won't submit</textarea><br/>
  <p>Sample textfield (try enter key):</p>
  <input type="text" placeholder="" />
  <br/>
  <input type="submit" value="Save" />
  <h3 id="log"></h3>
</form>


কে এবং কেন এটিকে হ্রাস করবে: ভাবছেন | আমার সমাধান নিয়ে সমস্যা কি?
mate.gwozdz

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

@ নাথানচ - এই কোডটি আপনি যা বলছেন তার ঠিক বিপরীত কাজ করে। এটি কেবল ফর্মটি জমা দিতে বাধা দেয় এবং অন্য কোনও কার্যকারিতা রোধ করে না - উদাহরণস্বরূপ, আপনার কাছে একটি পাঠ্য ক্ষেত্র থাকতে পারে এবং নতুন অনুচ্ছেদ তৈরি করতে এন্টার ব্যবহার করতে চান।
mate.gwozdz 21

1
প্রথম লাইনে একটি টাইপো রয়েছে। পরিবর্তে function(e)এটি করা উচিত function(event)। অন্যথায়, এটি আমার পক্ষে কাজ করে। ধন্যবাদ.
গিলারমো প্রান্ডি

1
এটি একটি নিখুঁত জীবনকালীন, যেহেতু গ্রিড ইনলাইন সম্পাদনাগুলির মতো জিনিসের জন্য ইভেন্টগুলি সংরক্ষণের ইভেন্টগুলিকে সঠিকভাবে পরিচালনা করা থেকে আমাকে বাধা দেয় else একমাত্র পরামর্শ হ'ল 'সেটটাইমআউট' ব্যবহার না করা। আমি মনে করি লোকেরা এই উত্তরটি নিয়ে সমস্যা। এটা খুব চতুর। পরিবর্তে, ইভেন্টটি করুন on("keydown", function(event) { enterPressed = true; }এবং তারপরে জমা দিন ইভেন্টে, on("submit", function(e) { if (pressedEnter == true) { pressedEnter = false; e.preventDefault(); return false;}এটি এটি নিশ্চিত করবে যে এটি কোনও বিলম্বের কারণই নয়।
কার্টিস স্নোডেন

3

এটি সঠিক উপায়, আপনাকে আপনার পৃষ্ঠা থেকে পুনঃনির্দেশিত করা হবে না

$('form input').keydown(function (e) {
if (e.keyCode == 13) {
    e.preventDefault();
    return false;
}
});

2

আমার একটি অবিশ্বাস্য সমস্যা ছিল, যেখানে আমার "এজাক্স টেক্সটফিল্ডস" (ইআইআই সিগ্রিডভিউ) এবং একটি মাত্র সাবমিট বাটন সহ গ্রিড ছিল। প্রতিবার আমি একটি পাঠ্যক্ষেত্রের জন্য অনুসন্ধান করেছি এবং জমা দেওয়া ফর্মটি প্রবেশ করুন। আমাকে বোতামটি দিয়ে কিছু করতে হয়েছিল কারণ এটি ভিউ (এমভিসি প্যাটার্ন) এর মধ্যে একমাত্র সাধারণ বোতাম ছিল। আমাকে যা করতে হয়েছিল তা হ'ল সরানো type="submit"এবং রাখাonclick="document.forms[0].submit()


2

আমি মনে করি এটি সমস্ত উত্তর দিয়ে ভালভাবে কভার করা হয়েছে, তবে আপনি যদি কিছু জাভাস্ক্রিপ্ট বৈধতা কোড সহ একটি বোতাম ব্যবহার করছেন তবে আপনি কেবলমাত্র এন্টারটির জন্য ফর্মের অ্যানকিপ্রেস সেট করতে পারেন আপনার প্রত্যাশাকে প্রত্যাশা হিসাবে কল করতে:

<form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;">

অ্যানকিপ্রেস জেএস আপনার যা করার দরকার তা হতে পারে। বৃহত্তর, বৈশ্বিক পরিবর্তনের দরকার নেই। এটি বিশেষত সত্য যদি আপনি স্ক্র্যাচ থেকে অ্যাপ্লিকেশনটির কোডিং করছেন না এবং অন্য কারও ওয়েবসাইটকে ছিঁড়ে ফেলা এবং এটির পুনরায় পরীক্ষা না করেই আপনি ঠিক করে নিয়ে এসেছেন।


টম হাববার্ডের উত্তরে আমি এটির রূপটি উপলব্ধি করতে পেরেছিলাম, যা আমি +1 করেছি কারণ এটি অন্যান্য ধারণার জন্য এসও অনুসন্ধান করার আগে আজ আমি নিজেই যা করেছি।
রসুন

2

এখানে ইতিমধ্যে অনেক ভাল উত্তর রয়েছে, আমি কেবলমাত্র ইউএক্স দৃষ্টিকোণ থেকে কিছু অবদান রাখতে চাই। ফর্মগুলিতে কীবোর্ড নিয়ন্ত্রণগুলি খুব গুরুত্বপূর্ণ।

কীপ্রেসে জমা দেওয়া থেকে কীভাবে অক্ষম করবেন তা প্রশ্ন Enter। কীভাবে Enterপুরো অ্যাপ্লিকেশনটিতে উপেক্ষা করবেন তা নয় । সুতরাং হ্যান্ডলারের সাথে উইন্ডোটি নয়, কোনও ফর্ম উপাদানকে সংযুক্ত করার কথা বিবেচনা করুন।

Enterফর্ম জমা দেওয়ার জন্য অক্ষম করা এখনও নিম্নলিখিতগুলির অনুমতি দেওয়া উচিত:

  1. জমা Enterদেওয়ার বোতামটি ফোকাস করার মাধ্যমে ফর্ম জমা দেওয়া ।
  2. সমস্ত ক্ষেত্র জনবহুল হলে ফর্ম জমা দিন।
  3. জমা না দেওয়ার বোতামগুলির মাধ্যমে ইন্টারঅ্যাকশন Enter

এটি কেবল বয়লারপ্লেট তবে এটি তিনটি শর্ত অনুসরণ করে।

$('form').on('keypress', function(e) {
  // Register keypress on buttons.
  $attr = $(e.target).attr('type);
  if ($attr === 'button' || $attr === 'submit') {
    return true;
  }

  // Ignore keypress if all fields are not populated.
  if (e.which === 13 && !fieldsArePopulated(this)) {
    return false;
  }
});


1

আমি এখানে কিছু উত্তর না পেয়ে দেখেছি: আপনি যখন পৃষ্ঠার উপাদানগুলির মাধ্যমে ট্যাব করবেন, Enterআপনি জমা দেওয়ার বোতামে পৌঁছানোর সময় টিপলে ফর্মটিতে অনসামিত হ্যান্ডলারটি ট্রিগার হয়ে যাবে, তবে এটি ইভেন্টটি মাউস ইভেন্ট হিসাবে রেকর্ড করবে। বেশিরভাগ ঘাঁটি কভার করার জন্য আমার সংক্ষিপ্ত সমাধানটি এখানে:

এটি কোনও jQuery- সম্পর্কিত উত্তর নয়

এইচটিএমএল

<form onsubmit="return false;" method=post>
  <input type="text" /><br />
  <input type="button" onclick="this.form.submit()" value="submit via mouse or keyboard" />
  <input type="button" onclick="submitMouseOnly(event)" value="submit via mouse only" />
</form>

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

window.submitMouseOnly=function(evt){
    let allow=(evt instanceof MouseEvent) && evt.x>0 && evt.y>0 && evt.screenX > 0 && evt.screenY > 0;
    if(allow)(evt.tagName=='FORM'?evt.target:evt.target.form).submit();
}

কাজের উদাহরণ খুঁজে পেতে: https://jsfiddle.net/nemesarial/6rhogva2/


0

আমার নির্দিষ্ট ক্ষেত্রে আমাকে ফর্মটি জমা দেওয়া থেকে ENTER বন্ধ করতে হবে এবং সাবমিট বোতামটির ক্লিকের অনুকরণও করতে হয়েছিল। এটি হ'ল সাবমিট বাটনটিতে ক্লিক হ্যান্ডলার ছিল কারণ আমরা একটি মডেল উইন্ডোর (উত্তরাধিকারসূত্রে পুরানো কোড) এর মধ্যে ছিলাম। যে কোনও ক্ষেত্রেই এই মামলার জন্য আমার কম্বো সমাধান এখানে।

    $('input,select').keypress(function(event) {
        // detect ENTER key
        if (event.keyCode == 13) {
            // simulate submit button click
            $("#btn-submit").click();
            // stop form from submitting via ENTER key press
            event.preventDefault ? event.preventDefault() : event.returnValue = false;
        }
    });

এই ব্যবহারের ক্ষেত্রে আইই 8 এর সাথে কাজ করা লোকদের জন্য বিশেষভাবে কার্যকর is


0

এটি আমার পক্ষে কাজ করে

jQuery.each($("#your_form_id").find('input'), function(){
    $(this).bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });
});

0

আমি একটি সামান্য কফিস্ক্রিপ্ট কোড যুক্ত করতে চাই (ফিল্ড পরীক্ষিত নয়):

$ ->
    $(window).bind 'keypress', (event) ->
        if event.keyCode == 13
            unless {'TEXTAREA', 'SELECT'}[event.originalEvent.srcElement.tagName]
                event.preventDefault()

(আমি আশা করি আপনি ক্লজ না থাকলে সুন্দর কৌশলটি পছন্দ করবেন like)


0

জাভাস্ক্রিপ্ট ব্যবহার (কোনও ইনপুট ক্ষেত্র পরীক্ষা না করে):

<script>
window.addEventListener('keydown', function(e) {
    if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
        e.preventDefault();
        return false;
    }
}, true);
</script>

যদি কেউ নির্দিষ্ট ক্ষেত্রগুলিতে এটি প্রয়োগ করতে চায় তবে উদাহরণস্বরূপ ইনপুট প্রকারের পাঠ্য:

<script>
window.addEventListener('keydown', function(e) {
    if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
        if (e.target.nodeName == 'INPUT' && e.target.type == 'text') {
            e.preventDefault();
            return false;
        }
    }
}, true);
</script>

এটি আমার ক্ষেত্রে ভাল কাজ করে।


0

আপনার সিএসএসে যান এবং এটিতে এটি যুক্ত করুন যতক্ষণ না আপনি যদি ইনপুট জমা না করেন তবে আপনি যদি না চান তবে আপনি এটি মুছতে বা টাইপ করতে পারেন activateএবং deactivateপরিবর্তে তার পরিবর্তে টাইপ করতে পারেন

 input:disabled {
        background: gainsboro;
      }
      input[value]:disabled {
        color: whitesmoke;
      }

0

আপনি javascript:void(0)ফর্ম জমা আটকাতেও ব্যবহার করতে পারেন ।

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>


method="post"আপনার ফর্মটি নির্দিষ্ট করে রাখলে কাজ করে না । উদাহরণস্বরূপ আমি ফর্মটি বোতামগুলির মাধ্যমে জমা দিতে চাই, তবে ইনপুটটিতে ফোকাস করার সময় এন্টার টিপে না।
সৌলেস্তে

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

-2

অন্যান্য সমাধানগুলির সাথে হতাশার পরে এটি সকল ব্রাউজারে আমার পক্ষে কাজ করেছে। নাম_স্পেসের বাইরের ফাংশনটি কেবল গ্লোবালগুলি ঘোষনা করা থেকে দূরে থাকার জন্য, আমি প্রস্তাবিত এমন কিছু something

$(function() {window.name_space = new name_space();}); //jquery doc ready
function name_space() {
    this.is_ie = (navigator.userAgent.indexOf("MSIE") !== -1);

    this.stifle = function(event) {
        event.cancelBubble;
        event.returnValue = false;
        if(this.is_ie === false) {
            event.preventDefault();
        }
        return false;
    }

    this.on_enter = function(func) {
        function catch_key(e) {
            var enter = 13;
            if(!e) {
                var e = event;
            }
            keynum = GetKeyNum(e);
            if (keynum === enter) {
                if(func !== undefined && func !== null) {
                    func();
                }
                return name_space.stifle(e);
            }
            return true; // submit
        }

        if (window.Event) {
            window.captureEvents(Event.KEYDOWN);
            window.onkeydown = catch_key;
        }
        else {
            document.onkeydown = catch_key;
        }

        if(name_space.is_ie === false) {
            document.onkeypress = catch_key;    
        }
    }
}

নমুনা ব্যবহার:

$(function() {
    name_space.on_enter(
        function () {alert('hola!');}
    );
});

-2

ব্যবহার করুন:

// Validate your form using the jQuery onsubmit function... It'll really work...

$(document).ready(function(){
   $(#form).submit(e){
       e.preventDefault();
       if(validation())
          document.form1.submit();
   });
});

function validation()
{
   // Your form checking goes here.
}

<form id='form1' method='POST' action=''>
    // Your form data
</form>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.