jquery অক্ষম ফর্ম প্রবেশ জমা দিন


207

আমার পৃষ্ঠায় নীচের জাভাস্ক্রিপ্ট রয়েছে যা দেখে মনে হচ্ছে কাজ করছে না।

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

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


3
এখানে একটি সহজ এইচটিএমএল একমাত্র সমাধান stackoverflow.com/a/51507806/337934
SamB

উত্তর:


420

যদি keyCodeধরা হয় না, ধরা which:

$('#formid').on('keyup keypress', function(e) {
  var keyCode = e.keyCode || e.which;
  if (keyCode === 13) { 
    e.preventDefault();
    return false;
  }
});

সম্পাদনা: এটি মিস হয়েছে, এর keyupপরিবর্তে ব্যবহার করা ভালkeypress

সম্পাদনা 2: ফায়ারফক্সের কয়েকটি নতুন সংস্করণে যেমন ফর্ম জমা দেওয়া রোধ করা হয়নি, তেমনি ফর্মটিতে কীপ্রেস ইভেন্ট যুক্ত করা আরও নিরাপদ। এছাড়াও ইভেন্টটি কেবল "নাম" ফর্মের সাথে আবদ্ধ করে কেবলমাত্র ফর্ম আইডির মাধ্যমে (আর?) কাজ করে না। সুতরাং আমি কোড উদাহরণ যথাযথভাবে পরিবর্তন করে এটি আরও সুস্পষ্ট করে তুলেছি।

সম্পাদনা 3: এ পরিবর্তিত bind()হয়েছেon()


15
jQuery এটি এটিকে স্বাভাবিক করে তোলে e.which, সুতরাং আপনার সমস্যার পরীক্ষা করার দরকার নেই e.keyCode, তবে এই সমস্যার সর্বাধিক সম্ভাব্য কারণগুলির জন্য +1।
বোজাঙ্গলেস

4
return false;এই জন্য আপনার কি দরকার ? e.preventDefault();enougth বলে মনে হচ্ছে
ক্রোমিগো

10
গুরুত্বপূর্ণ! এই সমাধান ব্লকটি টেক্সারিয়ায় ভেঙে যায়।
জার্মান খোখলোভ

4
সমস্যাটি হ'ল যদি আমার একই আকারে একটি পাঠ্যবাক্স থাকে তবে এখন আমি পাঠ্যবক্সে একটি প্রবেশ (নতুন লাইন তৈরি করতে) যোগ করতে পারি না।
টিক্কি

3
keyCode === 13 && !$(e.target).is('textarea')
টেরান

62

আপনার Enterযখন ইনপুট উপাদানগুলিতে ফোকাস থাকে তখন সাধারণত ফর্মটি জমা দেওয়া হয় ।

আমরা কোনও ফর্মের মধ্যে ইনপুট উপাদানগুলিতে Enterকী (কোড 13) অক্ষম করতে পারি :

$('form input').on('keypress', function(e) {
    return e.which !== 13;
});

ডেমো: http://jsfiddle.net/bnx96/325/


কাস্টম স্বতঃপূরণ ইনপুট ক্ষেত্রে আইওএস গো বোতামটি আমার সমস্যা ছিল। এটি এটি সমাধান।
ডিলান ভালাদ

11
এটি এন্টার কীটি textareasএকই ফর্মের মধ্যে ব্যবহার হতে বাধা দেয় । $("form input")পরিবর্তে ব্যবহার করে $("form :input")এটি ঠিক করা হয়েছে বলে মনে হচ্ছে। ডেমো: jsfiddle.net/bnx96/279
শনিপারসন

43

এমনকি আরও ছোট:

$('myform').submit(function() {
  return false;
});

35
তবে এটি ব্যবহারকারীর ক্লিককেও বাধা দেবে?
হাইবুইহোআং

5
@ হাইবুইহোআং হ্যাঁ এটি ফর্ম জমা অক্ষম করবে।
টম

7
function(e) {e.preventDefault();}ইভেন্ট হ্যান্ডলারগুলিকে প্রত্যাশিত
ফ্লু

6
@ user1111929 এটি দুর্দান্ত কাজ করে তবে এটি শীর্ষের উত্তর হওয়া উচিত নয় কারণ প্রশ্নটি কেবল বোতামের Enterমাধ্যমে ফর্ম জমা অক্ষম করার বিষয়ে নয় এবং নয় Submit
দাভস্লব

একটি সাধারণ পরিস্থিতি যেখানে আপনি ফর্ম জমাটি সংরক্ষণ করতে চাইতে পারেন, তবে 'এন্টার' কী টিপে সাবমিশনটি অক্ষম করুন, যদি আপনি onClickকোনও ফর্মটি বৈধতা দেওয়ার জন্য কোনও jQuery ইভেন্ট ব্যবহার করার সিদ্ধান্ত নেন এবং এখনও jQuery ব্যবহার করে জমা দেন। অন্য কথায়, এমন কিছু ক্ষেত্রে রয়েছে যেখানে আপনি কেবল জাভাস্ক্রিপ্ট / jQuery এর মাধ্যমে জমা দিতে চান। আপনি এখনও এই সমাধান সহ এজেএক্স ব্যবহার করতে পারেন, এটি submitপদ্ধতির বেস কার্যকারিতা অক্ষম করে ।
জেআরড দ্য খারাপ


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

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


9

উপরের বেশিরভাগ উত্তর ব্যবহারকারীদের পাঠ্য ক্ষেত্রের ক্ষেত্রে নতুন লাইন যুক্ত করতে বাধা দেবে। এটি যদি আপনি এমন কিছু এড়াতে চান তবে বর্তমানে কোন উপাদানটির ফোকাস রয়েছে তা পরীক্ষা করে আপনি এই বিশেষ কেসটি বাদ দিতে পারেন:

var keyCode = e.keyCode || e.which;
if (keyCode === 13 && !$(document.activeElement).is('textarea')) {
  e.preventDefault();
  return false;
}

8

ENTER কীটির জন্য প্রতিটি কীস্ট্রোক ক্যাপচার এবং পরীক্ষা করার ওভারকিল সত্যিই আমাকে বাগড করে, তাই আমার সমাধানটি নিম্নলিখিত ব্রাউজার আচরণের উপর নির্ভর করে:

ENTER চেপে জমা দেওয়া বোতামের একটি ক্লিক ইভেন্টকে ট্রিগার করবে (আইই 11, ক্রোম 38, এফএফ 31 এ পরীক্ষা করা হয়েছে) ** (রেফ: http://mattsnider.com/how-forms-submit-wn- চাপার-কেন্দ্র / )

সুতরাং আমার সমাধানটি হ'ল স্ট্যান্ডার্ড সাবমিট বাটনটি (যেমন <input type="submit">) সরিয়ে ফেলতে হবে যাতে উপরের আচরণটি ব্যর্থ হয় কারণ ENTER টিপে গেলে যাদুতে ক্লিক করার জন্য কোনও জমা দেওয়ার বোতাম নেই। পরিবর্তে, আমি jQuery এর .submit()পদ্ধতির মাধ্যমে ফর্মটি জমা দেওয়ার জন্য একটি নিয়মিত বোতামে একটি jQuery ক্লিক হ্যান্ডলার ব্যবহার করি ।

<form id="myform" method="post">
  <input name="fav_color" type="text">
  <input name="fav_color_2" type="text">
<button type="button" id="form-button-submit">DO IT!</button>
</form>

<script>
 $('#form-button-submit').click(function(){
    $('#myform').submit();
  });
</script>

ডেমো: http://codepen.io/anon/pen/fxeyv?editors=101

** এই আচরণটি প্রযোজ্য নয় যদি ফর্মটিতে কেবলমাত্র 1 টি ইনপুট ক্ষেত্র থাকে এবং সেই ক্ষেত্রটি একটি 'পাঠ্য' ইনপুট হয়; এক্ষেত্রে ফর্মটি ENTER কীতে জমা দেওয়া হবে এমনকি HTML মার্কআপে (যেমন কোনও অনুসন্ধানের ক্ষেত্র) কোনও সাবমিট বাটন উপস্থিত না থাকলেও। 90 এর দশক থেকে এটি স্ট্যান্ডার্ড ব্রাউজারের আচরণ।


"ফর্মটির কেবলমাত্র 1 টি ইনপুট ক্ষেত্র রয়েছে এবং" ক্ষেত্রটি একটি 'পাঠ্য' ইনপুট "এর কারণে" ENTER কী'র উপরে ফর্ম জমা দেওয়া হবে "এই প্রতিরোধ করতে আমি একটি অদৃশ্য ইনপুট বাক্স যুক্ত করেছি।
লুও জিওং হুই

6

আপনি যদি কেবল প্রবেশ ও জমা দেওয়ার বোতামটি অক্ষম করতে চান তবে ফর্মের অনবিত ইভেন্টটি ব্যবহার করুন

<form onsubmit="return false;">

আপনি জেএস ফাংশনে কল দিয়ে "রিটার্ন মিথ্যা" প্রতিস্থাপন করতে পারেন যা যা প্রয়োজন তা করবে এবং ফর্মটি শেষ পদক্ষেপ হিসাবে জমা দেবে।


1
এটি জমা দেওয়া বোতামটি ক্লিক করে সমস্ত ফর্ম জমা অক্ষম করবে।
নিক

100% নয় ... নিয়মিত একটি কী জমা দিন কাজ করুন ... প্রতিরোধের জন্য সর্বোত্তম ব্যবহার করুন jquery
কিংরাইডার

ভাল বিকল্প উত্তর (উপরে ক্যাভেটস সহ) কারণ ... ভাল, কখনও কখনও এটি আপনার প্রয়োজন হয়।
এমিলি

পরিস্থিতিটির জন্য আমার ঠিক এটিই দরকার ছিল, আপনাকে ধন্যবাদ
shababhsiddique

4

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

সংক্ষেপে, এখানে কোড:

<script type="text/javascript">
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>

এই কোডটি কেবল ইনপুট টাইপ = 'পাঠ্য' এর জন্য "এন্টার" কী প্রতিরোধ করতে to (কারণ দর্শকের পুরো পৃষ্ঠা জুড়ে প্রবেশের প্রয়োজন হতে পারে) আপনি অন্যান্য ক্রিয়াগুলির জন্য যদি "এন্টার" অক্ষম করতে চান তবে আপনি কনসোল.লগ যুক্ত করতে পারেন (ই); আপনার পরীক্ষার উদ্দেশ্যে, এবং ক্রোমে F12 চাপুন, "কনসোল" ট্যাবে যান এবং পৃষ্ঠায় "ব্যাকস্পেস" টিপুন এবং কোন মানগুলি ফিরে এসেছে তা দেখতে তার ভিতরে এটি দেখুন, তারপরে আপনি কোডটি আরও বাড়ানোর জন্য সেই সমস্ত পরামিতিগুলিকে লক্ষ্য করতে পারেন "e.target.nodeName" , "e.target.type" এবং আরও অনেক কিছুতে আপনার প্রয়োজন অনুসারে উপরের ...


2
আসলে এটি হওয়া উচিত e.target.nodeName === 'INPUT' && e.target.type !== 'textarea'। নির্দিষ্ট কোড সহ এটি কোনও রেডিও বা চেকবক্সকে কেন্দ্র করে ফর্মগুলি জমা দেওয়ার অনুমতি দেবে।
afnpires

3

আমি জানি না আপনি ইতিমধ্যে এই সমস্যাটি সমাধান করেছেন কিনা, বা এই মুহুর্তে কেউ সমাধান করার চেষ্টা করছেন তবে, এই জন্য আমার সমাধান এখানে!

$j(':input:not(textarea)').keydown(function(event){
    var kc = event.witch || event.keyCode;
    if(kc == 13){
    event.preventDefault();
        $j(this).closest('form').attr('data-oldaction', function(){
            return $(this).attr('action');
        }).attr('action', 'javascript:;');

        alert('some_text_if_you_want');

        $j(this).closest('form').attr('action', function(){
            return $(this).attr('data-oldaction');
        });
        return false;
    }
});

2

সহজ উপায় হ'ল বোতামে বোতামের ধরণের পরিবর্তন করা - এইচটিএমএলে এবং তারপরে জেএসে ইভেন্ট যুক্ত করুন ...

এটি থেকে পরিবর্তন করুন:

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

প্রতি

<form id="myForm">
   <button type="button" id="btnSubmit">Submit</button>
</form>

এবং জেএস বা জ্যাকুরিতে যুক্ত করুন:

("#btnSubmit").click(function () {
    $('#myForm').submit();
});

1

নিম্নলিখিত কোডটি একটি কী জমা দেওয়ার জন্য প্রবেশ কীটিকে অস্বীকার করবে, তবে এখনও আপনাকে একটি টেক্সারিয়ায় প্রবেশ কীটি ব্যবহার করার অনুমতি দেবে। আপনার প্রয়োজনের উপর নির্ভর করে আপনি এটিকে আরও সম্পাদনা করতে পারেন।

<script type="text/javascript">
        function stopRKey(evt) {
          var evt = (evt) ? evt : ((event) ? event : null);
          var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
          if ((evt.keyCode == 13) && ((node.type=="text") || (node.type=="radio") || (node.type=="checkbox")) )  {return false;}
        }

        document.onkeypress = stopRKey;
</script> 

1

ফায়ারফক্সে, আপনি যখন ইনপুট এবং এন্টার টিপেন তখন এটি এটি উপরের ফর্মটি জমা দেবে। সমাধানটি জমা দিতে হবে ফর্মটি জমা দিন এটি যুক্ত করুন:

<input type="submit" onclick="return false;" style="display:none" />

1

3 বছর পরে এবং একটিও ব্যক্তি এই প্রশ্নের সম্পূর্ণ উত্তর দেয়নি।

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

ধরে নিই যে ফর্মটির একটি সাবমিট বাটন রয়েছে, তা একটি <button id="save-form">বা একটি হোক <input id="save-form" type="submit">:

$("#save-form").on("click", function () {
    $.ajax({
        ...
    });
    return false;
});


-2

ফাইলটি সমাপ্ত হয়ে গেলে (লোড সম্পূর্ণ), স্ক্রিপ্টটি "এন্ট্রি" কী এর জন্য প্রতিটি ইভেন্ট সনাক্ত করে এবং তার পিছনে ইভেন্টটি অক্ষম করে।

<script>
            $(document).ready(function () {
                $(window).keydown(function(event){
                    if(event.keyCode == 13) {
                        e.preventDefault(); // Disable the " Entry " key
                        return false;               
                    }
                });
            });
        </script>

কিছু ব্যাখ্যা যুক্ত করুন
HaveNoDisplayName

@ হ্যাভনোডিজপ্লিনাম: আপডেট হয়েছে।
ম্যাকনাভি

-4

সমস্ত ব্রাউজারের জন্য জাভাস্ক্রিপ্টে সম্পূর্ণ সমাধান

উপরের কোড এবং বেশিরভাগ সমাধান সঠিক। তবে আমি মনে করি সবচেয়ে পছন্দ করা একটি "সংক্ষিপ্ত উত্তর" যা অসম্পূর্ণ।

সুতরাং এখানে পুরো উত্তর। IE 7 এর জন্য নেটিভ সাপোর্ট সহ জাভাস্ক্রিপ্টে।

var form = document.getElementById("testForm");
form.addEventListener("submit",function(e){e.preventDefault(); return false;});

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


8
আপনি "জমা দিন" বোতামটি ক্লিক করলে এটি ফর্মটি জমা দেওয়া থেকে বাধা দেয়।
মারিও ওয়ার্নার

-10

এটি সম্পর্কে:

$(":submit").closest("form").submit(function(){
    $(':submit').attr('disabled', 'disabled');
});

এটি আপনার অ্যাপ্লিকেশনটিতে জমা বোতামগুলির সাথে সমস্ত ফর্ম অক্ষম করা উচিত।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.