jquery - ব্যবহারকারীদের এন্টার আঘাত করে একটি ফর্ম জমা দিতে প্রতিরোধ করুন




html forms (18)

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

আমি জরিপের উপর এইচটিএমএল, পিএইচপি 5.2.9, এবং jQuery ব্যবহার করছি।


যে কোন জায়গায় প্রবেশ করান বাতিল করুন

আপনার <textarea> , তবে আপনার <form> <textarea> যোগ করুন:

<form ... onkeypress="return event.keyCode != 13;">

অথবা jQuery দিয়ে:

$(document).on("keypress", "form", function(event) { 
    return event.keyCode != 13;
});

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

keydown ইভেন্টটি keydown উপর পছন্দসই হয় কারণ অক্ষরটি প্রকৃতপক্ষে সন্নিবেশ করা হচ্ছে যখন এটি কেবল বহিস্কার করা হয়। কী কী চাপলে কী- keydown (এবং কী-আপ) বহিস্কার করা হয়, কন্ট্রোল কী সহ। এবং, keyCode কোড প্রকৃত চরিত্রকে সন্নিবেশিত করে, শারীরিক কী ব্যবহার করা হয় না। এই ভাবে আপনাকে স্পষ্টভাবে চেক করতে হবে না যে নম্পাদ এন্টার কী (108) টি চাপলেও। keyup ফর্ম জমা ব্লক খুব দেরী হয়।

উল্লেখ্য যে $(window) $(document) পরিবর্তে অন্য কোন উত্তরগুলিতে প্রস্তাবিত হয়েছে $(document) IE = = 8 তে keydown / keydown / keydown জন্য কাজ করে না, তাই যদি আপনি সেই দরিদ্র ব্যবহারকারীদের ঢেকে রাখতে চান তবে এটি ভাল পছন্দ নয় যেমন.

শুধুমাত্র textareas এ প্রবেশ করান অনুমতি দিন

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

<input ... onkeypress="return event.keyCode != 13;">
<select ... onkeypress="return event.keyCode != 13;">
...

Boilerplate কমাতে, jQuery এর সাথে সম্পন্ন করা ভাল:

$(document).on("keypress", ":input:not(textarea)", function(event) {
    return event.keyCode != 13;
});

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

$(document).on("keypress", ":input:not(textarea)", function(event) {
    if (event.keyCode == 13) {
        event.preventDefault();
    }
});

Textareas এ প্রবেশ কী অনুমতি এবং শুধুমাত্র বোতাম জমা দিন

আপনি যদি বোতাম জমা দেওয়ার জন্য এন্টার কীটি দিতে চান তবে <input|button type="submit"> খুব পরে, আপনি সর্বদা নির্বাচক হিসাবে নীচের হিসাবে পরিমার্জন করতে পারেন।

$(document).on("keypress", ":input:not(textarea):not([type=submit])", function(event) {
    // ...
});

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


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

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

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

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

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

আমার ক্ষেত্রে আমার একটি জাভাস্ক্রিপ্ট UI স্বয়ংসম্পূর্ণ ক্ষেত্র এবং টেক্সরেয়ারগুলির একটি ফর্ম ছিল, তাই আমি স্পষ্টভাবে তাদের এন্টার গ্রহণ করতে চেয়েছিলাম। তাই আমি একটি ফর্ম থেকে type="submit" ইনপুট সরানো এবং পরিবর্তে একটি অ্যাঙ্কর <a href="" id="btn">Ok</a> । তারপর আমি একটি বোতাম হিসাবে এটি styled এবং নিম্নলিখিত কোড যোগ করা হয়েছে:

$( '#btn' ).click( function( event ){
    event.preventDefault();
    if ( validateData() ){
        $( 'form#frm' ).append( '<input type="submit" id="frm-submit" style="display:none;"></input>' );
        setTimeout( function(){ $( '#frm-submit' ).click(); }, 500 );
    }
    return false;
});

যদি কোন ব্যবহারকারী সমস্ত প্রয়োজনীয় ক্ষেত্র পূরণ করে তবে validateData() সফল হয় এবং ফর্ম জমা দেয়।


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


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

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

(আমি আশা করি যদি আপনি ধারাবাহিকভাবে চমৎকার কৌশলটি পছন্দ করেন।)


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

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

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


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

এটি একটি 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/


একটি চমৎকার সহজ সামান্য jQuery সমাধান:

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

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

বরং এই ব্যবহার করুন

<input type="button">

এই ব্যবহার করার চেয়ে

<input type="submit">

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

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

ফর্ম জমা দেওয়ার জন্য Enter নিষ্ক্রিয় করা এখনও নীচের অনুমতি দিতে হবে:

  1. জমা বাটন ফোকাস যখন Enter মাধ্যমে ফর্ম জমা।
  2. সমস্ত ক্ষেত্র জনবহুল যখন ফর্ম জমা।
  3. প্রবেশের মাধ্যমে নন-জমা বোতামগুলির সাথে মিথস্ক্রিয়া।

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

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


এটা আমার জন্য কাজ করে

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

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

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

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

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

কিছু নোট:

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

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


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

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

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

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

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


শুধুমাত্র ব্লক জমা দিন তবে অন্যটি নয়, প্রবেশপথের গুরুত্বপূর্ণ কার্যকারিতা, যেমন <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>


অনুচ্ছেদ 4.10.22.2 ডাব্লু 3 সি HTML5 স্পেক্টের অনুলিপি জমাটি বলে:

একটি form উপাদান এর ডিফল্ট বোতাম প্রথম অর্ডার বাটন যার আকার form উপাদান।

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

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

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

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

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





form-submit