ট্রিগার বাটন ক্লিক প্রবেশ করান

Question

আমার দুটি পৃষ্ঠাতে একটি পৃষ্ঠা রয়েছে। একটি হ'ল একটি <button>উপাদান এবং অন্যটি হ'ল ক <input type="submit">। এই ক্রমে বোতামগুলি পৃষ্ঠায় প্রদর্শিত হবে। আমি যদি ফর্মের যে কোনও জায়গায় কোনও পাঠ্য ক্ষেত্রে আছি এবং টিপুন <Enter>, বোতামের উপাদানটির clickইভেন্টটি ট্রিগার করা হবে। আমি ধরে নিয়েছি কারণ বোতামের উপাদানটি আগে বসে।

আমি ডিফল্ট বোতামটি সেট করার কোনও নির্ভরযোগ্য পদ্ধতির মতো দেখতে এমন কিছু খুঁজে পাচ্ছি না এবং আমি এই মুহুর্তে অগত্যা চাইও না। এর চেয়ে ভাল কিছু না থাকলে আমি ফর্মের যে কোনও জায়গায় কিপ্রেস ক্যাপচার করেছি এবং এটি যদি <Enter>চাপানো চাবি হয় তবে আমি কেবল এটিকে অবহেলা করছি:

$('form').keypress( function( e ) {
  var code = e.keyCode || e.which;

  if( code === 13 ) {
    e.preventDefault();
    return false; 
  }
})

আমি এখন পর্যন্ত যতটুকু বলতে পারি, এটি কাজ করছে বলে মনে হচ্ছে, তবে এটি অবিশ্বাস্যভাবে হাম-মুষ্ট মনে হয়েছে।

কেউ কি এটি করার জন্য আরও পরিশীলিত কৌশল সম্পর্কে জানেন?

একইভাবে, এই সমাধানের কোনও সমস্যা আছে যা সম্পর্কে আমি ঠিক অবগত নই?

ধন্যবাদ।

Comments

কৌণিক প্রতিক্রিয়াশীল ফর্মগুলি পাশাপাশি ব্যবহার করার সময় এটি ঘটতে পারে, কেবল জিকুয়েরির জন্যই নয়, কৌণিক বিকাশের জন্যও।

— এইচডিজেইএমই

Answer 1

ব্যবহার

<button type="button">Whatever</button>

কৌতুক করা উচিত।

কারণটি হ'ল কোনও ফর্মের ভিতরে থাকা বোতামটির প্রকারটি স্পষ্টভাবে সেট করা আছে submit। জেডজেজবোজ যেমন বলেছে, স্পেক বলে যে প্রথম buttonবা তার inputসাথে type="submit"এই পরিস্থিতিতে উদ্দীপনা সৃষ্টি হয়েছে। আপনি যদি নির্দিষ্টভাবে সেট করেন type="button"তবে ব্রাউজারটি বিবেচনা থেকে তা সরানো হবে।

Comments

মিষ্টি, ধন্যবাদ, মনে হচ্ছে আইএন 8-র বোতামগুলি আমার জন্য <এন্টার> ক্লিকগুলি ক্যাপচার করছে, type="button"এটি সমাধান করছে বলে মনে হচ্ছে ... ধন্যবাদ! পিএস কোন ধারণা কেন এটি হয়? ie8 চিকিত্সা বোতাম টাইপ হিসাবে জমা? রহস্যময়।

— কোয়াং ভ্যান

ভাল উত্তর, ব্রাউজারে এই ইঙ্গিতগুলি দেয় যে কোন বোতামগুলি বোতামগুলি জমা দেয় না, তাই এটি মার্কআপটিকে পুনরায় অর্ডার না করে সঠিক কাজটি করতে পারে।

— ডন স্পোলডিং

@ লিনেস্টার এর উত্তর এই দ্বিঘাতের কারণটি কভার করে - "কোনও ধরণের বৈশিষ্ট্যযুক্ত বোতামটি তার টাইপটি জমা দেওয়ার জন্য সেট করা বোতামের মতোই গণ্য হবে।"

— বালতি 18

একই জন্য প্রয়োগ করা <input type="submit"/>হবে (ক্লিক ট্রিগার করবে) এবং <input type="button"/>(ক্লিক ট্রিগার করবে না)

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

অবিশ্বাস্য!! আমি খুব বিভ্রান্ত ছিলাম।

— মার্গাস পাল

Answer 2

কী আচরণ প্রত্যাশা করা উচিত তা সত্যিকার অর্থে বুঝতে এইচটিএমএল স্পেসিফিকেশনগুলি পড়া গুরুত্বপূর্ণ:

HTML5 এর বৈশিষ্ট স্পষ্টভাবে যুক্তরাষ্ট্রের কি ঘটবেimplicit submissions :

কোনও ফর্ম উপাদানটির ডিফল্ট বোতাম হ'ল ট্রি ক্রমের প্রথম জমা বোতাম যার ফর্মের মালিক সেই ফর্ম উপাদান।

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

এটি এইচটিএমএল 4 স্পষ্টে স্পষ্ট করে তৈরি করা হয়নি, তবে ব্রাউজারগুলি ইতিমধ্যে এইচটিএমএল 5 স্পেসে বর্ণিত যা প্রয়োগ করে চলেছে (এজন্য এটি স্পষ্টভাবে অন্তর্ভুক্ত করা হয়েছে)।

যুক্ত করতে সম্পাদনা করুন:

আমি যে সহজ উত্তরটির কথা ভাবতে পারি তা হ'ল আপনার জমা বোতামটি [type="submit"]ফর্মের প্রথম আইটেম হিসাবে রাখা, ফর্মের নীচে সিএসএস সহ প্যাডিং যুক্ত করা এবং নীচের অংশে জমা দেওয়া বোতামটি যেখানে আপনি এটি চান ঠিক তেমন অবস্থান করুন।

Comments

সেখানে আমি IEকে অভিশাপ দিচ্ছিলাম, দেখা যাচ্ছে এটি ছিল আমার ঝাঁঝরা মার্কআপ! চিয়ার্স!

— শাওসন

বাহ ... ধন্যবাদ স্যার। এটি একটি দুর্ঘটনাজনক অনুসন্ধান ছিল। আমি কীভাবে এন্টার কীটি টিপতে কোনও ক্লিক ইভেন্টকে বরখাস্ত করা হচ্ছে তা আমি জানতে পারি না, তবে আপনার উক্তিটি আমাকে w3.org/TR/html5/forms.html#mpmitted-submission

— ক্যামোমিশে

লিঙ্কটি নষ্ট হয়ে গেছে। আমি মনে করি w3c.github.io/html/sec-forms.html#mpmitted-Submission নতুন url।

— টিজে।

Answer 3

আমি মনে করি না এটি ঠিক করার জন্য আপনার জাভাস্ক্রিপ্ট বা সিএসএস দরকার।

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

আমি এটির জন্য ব্রাউজারের সমর্থন সম্পর্কে নিশ্চিত নই, তবে বোতামগুলির জন্য এইচটিএমএল ৪.০১ অনুচ্ছেদে একই আচরণটি নির্দিষ্ট করা হয়েছিল তাই আমি আশা করি এটি বেশ ভাল।

Answer 4

ফোকাসড উপর 'এন্টার' টিপে <input type="text">আপনি প্রথম অবস্থিত উপাদানটিতে ক্লিক করুন 'ইভেন্ট': <button>বা <input type="submit">। আপনি যদি 'এন্টার' টিপেন তবে <textarea>আপনি কেবল একটি নতুন পাঠ্য লাইন তৈরি করেন।

উদাহরণ এখানে দেখুন ।

আপনার কোডটি একটি নতুন পাঠ্য লাইন তৈরি করতে বাধা দেয় <textarea>, তাই আপনাকে কেবল কী চাপতে হবে <input type="text">।

তবে আপনাকে Enterপাঠ্য ক্ষেত্রে কেন চাপতে হবে ? আপনি যদি 'এন্টার' টিপে ফর্মটি জমা দিতে চান তবে লেআউটটিতে <button>অবশ্যই প্রথমটি থাকতে হবে, কেবল মার্কআপ দিয়ে খেলুন: <input type="submit">কোডটি আগে রাখুন <button>এবং আপনার প্রয়োজনীয় লেআউটটি সংরক্ষণ করতে সিএসএস ব্যবহার করুন।

'প্রবেশ' ক্যাচ করা এবং মার্কআপ সংরক্ষণ করা:

$('input[type="text"]').keypress(function (e) {
    var code = e.keyCode || e.which;
    if (code === 13)
    e.preventDefault();
    $("form").submit(); /*add this, if you want to submit form by pressing `Enter`*/
});

Comments

যদি এন্টার টিপানো হয় তবে বিবৃতিতে উভয় বিবৃতি কার্যকর করার জন্য কোনও ব্রেস থাকা উচিত নয়? অন্যথায় জমা প্রতিটি কী প্রেসের জন্য ঘটবে। ব্যর্থতার কথা মনে করিয়ে দেয়। :)

— ড্যানিমাইজার

Answer 5

আপনি যখনই <button>ডিফল্টরূপে কোনও উপাদান ব্যবহার করেন এটি সেই বোতামটিকে বিবেচনা করে type="submit"তাই আপনি যদি বোতামটি সংজ্ঞায়িত করেন type="button"তবে তা <button>সাবমিট বাটন হিসাবে বিবেচনা করবে না ।

Answer 6

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

Comments

আমি মনে করি না যে সমস্যাটি ফর্মটি জমা দেয়, এটি এমন যে এটি clickবাটন উপাদানগুলির ক্রিয়াকলাপটি ঘটাচ্ছে ইচ্ছামত একটি পরিণতি

— মার্টিন জেসপারসেন

আপনি সঠিক. যেভাবেই হোক, ফলাফলটি একই - অযাচিত ফর্ম জমা দেওয়ার জন্য আপনাকে এন্টার কীটি ক্যাপচার করতে হবে।

— স্পারফিউসিল

Answer 7

আপনি উপযুক্ত সময় অবধি ফর্ম জমা দেওয়ার জন্য জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন। খুব কৃপণ উদাহরণ:

<form onsubmit='return false;' id='frmNoEnterSubmit' action="index.html">

    <input type='text' name='txtTest' />

    <input type='button' value='Submit' 
        onclick='document.forms["frmNoEnterSubmit"].onsubmit=""; document.forms["frmNoEnterSubmit"].submit();' />

</form>

এন্টার টিপে ফর্মটি জমা দেওয়ার জন্য এখনও ট্রিগার করবে তবে জাভাস্ক্রিপ্ট এটিকে আসলে জমা দেওয়া থেকে বিরত রাখবে, যতক্ষণ না আপনি আসলে বোতামটি টিপেন না।

Answer 8

ডোম উদাহরণ

  <button onclick="anotherFoo()"> Add new row</button>
  <input type="text" name="xxx" onclick="foo(event)">

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

function foo(event){
   if(event.which == 13 || event.keyCode == 13) // for crossbrowser
   {
     event.preventDefault(); // this code prevents other buttons triggers use this
     // do stuff
   }
}

function anotherFoo(){
  // stuffs.
}

আপনি যদি প্রতিরোধ ডিফল্ট () ব্যবহার না করেন তবে অন্যান্য বোতামগুলি ট্রিগার হবে।

Answer 9

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

Comments

এই কীকোডটি সর্বদা পাস করা হচ্ছে যেন এটি একটি ক্লিক ছিল। এর মধ্যেই সমস্যা রয়েছে। :-)

— রব উইলকারসন

তারপরে আমি অনুমান করি আপনি এটি কঠোর উপায়ে করেছেন - পাশাপাশি বোতামে অনকিডাউন ইভেন্টটিও পরিচালনা করুন। হ্যান্ডলারটি একটি কী-এভেন্ট পাস হবে; কী কোডে -> 13 টি, প্রতিরোধক ডিফল্ট চেক করুন। এইভাবে আপনি ব্যবহারকারীদের ক্লিক ইভেন্টটি সম্পাদন করার পার্শ্ব প্রতিক্রিয়া ছাড়াই সেই বোতামটিতে প্রবেশ করতে চাপ দিতে পারেন।

— সত্যজিৎ

Answer 10

আমার পরিস্থিতির Submitফর্ম উপাদানটির মধ্যে দুটি বোতাম রয়েছে : Updateএবং Delete। Deleteবোতাম একটি চিত্র মুছে ফেলে এবং Updateবোতাম আকারে টেক্সট ক্ষেত্রের সাথে ডাটাবেসের আপডেট।

কারণ Deleteবোতাম আকারে প্রথম, এটা ডিফল্ট বোতাম ছিল Enterকী। আমি যা চেয়েছিলাম তা নয়। ব্যবহারকারী Enterকিছু পাঠ্য ক্ষেত্র পরিবর্তন করার পরে হিট করতে সক্ষম হবে বলে আশা করবে ।

আমি এখানে ডিফল্ট বোতামটি সেট করার জন্য আমার উত্তরটি পেয়েছি :

<form action="/action_page.php" method="get" id="form1">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
</form>
<button type="submit" form="form1" value="Submit">Submit</button>

কোনও স্ক্রিপ্ট ব্যবহার না করে, আমি প্রতিটি বোতামটি <button> form="bla"বৈশিষ্ট্যটি ব্যবহার করে এমন ফর্মটি সংজ্ঞায়িত করেছি । আমি Deleteএমন একটি ফর্মের বাটনটি সেট করেছিলাম যা বিদ্যমান নেই এবং Updateআমি Enterযে ফর্মটি চাবিতে প্রবেশ করতে চাইছি তাতে কীটি ব্যবহারকারীর মধ্যে থাকা ফর্মটির চাবিটি ট্রিগার করতে চেয়েছিলাম set

এটি এখনও পর্যন্ত আমার পক্ষে কাজ করেছে।

Comments

দয়া করে স্ট্যাকওভারফ্লোতে কীভাবে উত্তর দেবেন তা

— মুরস

Answer 11

আপনি এরকম কিছু করতে পারেন।

আপনার ইভেন্টটিকে একটি সাধারণ ফাংশনে বাঁধুন এবং কীপ্রেস বা বোতাম ক্লিকের মাধ্যমে ইভেন্টটি কল করুন।

উদাহরণ স্বরূপ.

function callME(event){
    alert('Hi');
}



$('button').on("click",callME); 
$('input ').keypress(function(event){
  if (event.which == 13) {
    callME(event);
  }
});

Answer 12

আমি ফর্মের প্রথম উপাদান হিসাবে "জমা" টাইপের একটি বোতাম যুক্ত করেছি এবং এটি অদৃশ্য ( width:0;height:0;padding:0;margin:0;border-style:none;font-size:0;) তৈরি করেছি । সাইটের রিফ্রেশের মতো কাজ করে, যেমন বোতামটি টিপানো হয় তখন সাইটটি আবার লোড হওয়া ব্যতীত আমি কিছুই করি না। আমার জন্য ভাল কাজ করে ...