html full এইচটিএমএল ফর্ম একাধিক জমা বাটন-ডিফল্ট হিসাবে এক বাটন মনোনীত




html form (8)

আমার পরামর্শ এই আচরণ যুদ্ধ করবেন না। আপনি কার্যকরভাবে floats ব্যবহার করে আদেশ পরিবর্তন করতে পারেন। উদাহরণ স্বরূপ:

<p id="buttons">
<input type="submit" name="next" value="Next">
<input type="submit" name="prev" value="Previous">
</p>

সঙ্গে:

#buttons { overflow: hidden; }
#buttons input { float: right; }

কার্যকরভাবে অর্ডার বিপরীত হবে এবং এইভাবে "পরবর্তী" বোতাম প্রবেশ আঘাত দ্বারা প্রবর্তিত মান হবে।

এই ধরনের কৌশল আরো হ্যাকি জাভাস্ক্রিপ্ট পদ্ধতি অবলম্বন ছাড়া অনেক পরিস্থিতিতে আবরণ হবে।

আমার এমন একটি ফর্ম রয়েছে যা নিম্নরূপ তিন জমা বোতাম আছে:

<input type="submit" name="COMMAND" value="&lsaquo; Prev">
<input type="submit" name="COMMAND" value="Save">
<input type="reset"  name="NOTHING" value="Reset">
<input type="submit" name="COMMAND" value="Next &rsaquo;">
<input type="button" name="NOTHING" value="Skip &rsaquo;" onclick="location = 'yada-yada.asp';">

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


বোবিন্সের সমাধানটি একটি বাটন তৈরির নেতিবাচক দিক যা ট্যাব- ডি হতে পারে, তবে অন্যথায় অব্যবহারযোগ্য। এটি কীবোর্ড ব্যবহারকারীদের জন্য বিভ্রান্তি সৃষ্টি করতে পারে।

একটি ভিন্ন সমাধান হল সামান্য পরিচিত form বৈশিষ্ট্য ব্যবহার করা হয়:

<form>
    <input name="data" value="Form data here">
    <input type="submit" name="do-secondary-action" form="form2" value="Do secondary action">
    <input type="submit" name="submit" value="Submit">
</form>

<form id="form2"></form>

এটি স্ট্যান্ডার্ড এইচটিএমএল , তবে দুর্ভাগ্যক্রমে ইন্টারনেট এক্সপ্লোরারে সমর্থিত নয়।


প্রথম বোতাম সর্বদা ডিফল্ট হয়; এটা পরিবর্তন করা যাবে না। আপনি যখন জাভাস্ক্রিপ্টের সাথে এটি ঠিক করার চেষ্টা করতে পারেন , তখন ফর্মটি স্ক্রিপ্টিং ছাড়াই ব্রাউজারে অপ্রত্যাশিতভাবে আচরণ করবে এবং কিছু ব্যবহারযোগ্যতা / অ্যাক্সেসিবিলিটি কোণার ক্ষেত্রে এটি সম্পর্কে চিন্তা করতে হবে। উদাহরণস্বরূপ, জোরান দ্বারা সংযুক্ত কোডটি আনুষ্ঠানিকভাবে <input type="button"> এন্টার প্রেসে ফর্মটি জমা দেবে যা সাধারণত ঘটবে না এবং এন্টার প্রেসের জন্য ফর্ম জমা দেওয়ার IE এর আচরণকে ধরবে না। ফর্ম অন্যান্য অ মাঠ বিষয়বস্তু। সুতরাং যদি আপনি কোন স্ক্রিপ্টটির সাথে <p> কোনও পাঠ্যটিতে ক্লিক করেন এবং এন্টার টিপুন, ভুল বোতামটি জমা দেওয়া হবে ... বিশেষ করে বিপজ্জনক যদি, উদাহরণস্বরূপ প্রদত্ত প্রকৃত ডিফল্ট বোতামটি 'মুছুন'!

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

<input type="submit" class="defaultsink" name="COMMAND" value="Save" />

.defaultsink {
    position: absolute; left: -100%;
}

(নোট: বোতামটি অফ-স্ক্রীনটি ধাক্কা দেওয়ার জন্য পজিশনিং ব্যবহার করা হয় কারণ display: none এবং visibility: hidden বোতামটি ডিফল্ট হিসাবে নেওয়া হয়েছে এবং এটি জমা দেওয়া হয়েছে কিনা তা নিয়ে ব্রাউজার-পরিবর্তনশীল পার্শ্ব প্রতিক্রিয়া আছে।)


JQuery ব্যবহার করে আরেকটি সমাধান,

$(document).ready(function() {
  $("input").keypress(function(e) {
    if (e.which == 13) {
      $('#submit').click();
      return false;
    }

    return true;
  });
});

এটি নিচের ফর্মগুলিতে কাজ করবে, ডিফল্ট অ্যাকশন "আপডেট করুন" তৈরি করবে:

<form name="f" method="post" action="/action">
  <input type="text" name="text1" />
  <input type="submit" name="button2" value="Delete" />
  <input type="submit" name="button1" id="submit" value="Update" />
</form>

পাশাপাশি:

<form name="f" method="post" action="/action">
  <input type="text" name="text1" />
  <button type="submit" name="button2">Delete</button>
  <button type="submit" name="button1" id="submit">Update</button>
</form>

ফরমের একটি ইনপুট ক্ষেত্র যখন ফোকাস করে তখন এটি শুধুমাত্র কী কী ফাঁদে যায়।


আপনি একই নামের বোতাম ব্যবহার করা উচিত নয়। এটা খারাপ semantics। পরিবর্তে, বিভিন্ন নাম মান নির্ধারণ করার জন্য আপনাকে আপনার ব্যাকএন্ড সংশোধন করা উচিত:

<input type="submit" name="COMMAND_PREV" value="&lsaquo; Prev">
<input type="submit" name="COMMAND_SAVE" value="Save">
<input type="reset"  name="NOTHING" value="Reset">
<input type="submit" name="COMMAND_NEXT" value="Next &rsaquo;">
<input type="button" name="NOTHING" value="Skip &rsaquo;" onclick="window.location = 'yada-yada.asp';">

যেহেতু আমি ব্যাকএন্ডে কোন ভাষা ব্যবহার করছি তা আমি জানি না, তাই আমি আপনাকে কিছু ছদ্মকোড দেব:

if (input name COMMAND_PREV is set) {

} else if (input name COMMAND_SAVE is set) {

} else if (input name COMMENT_NEXT is set) {

}

Quick'n'dirty আপনি জমা-বোতামের লুকানো অনুলিপি তৈরি করতে পারেন, যা প্রবেশ করাতে গেলে ব্যবহার করা উচিত।

উদাহরণ সিএসএস

input.hidden {
    width: 0px;
    height: 0px;
    margin: 0px;
    padding: 0px;
    outline: none;
    border: 0px;
}

উদাহরণ এইচটিএমএল

<input type="submit" name="next" value="Next" class="hidden" />
<input type="submit" name="prev" value="Previous" />
<input type="submit" name="next" value="Next" />

যদি কেউ এখন আপনার ফর্মটিতে প্রবেশ করে তবে, (লুকানো) পরবর্তী-বোতামটি জমা দেওয়ার জন্য ব্যবহার করা হবে।

IE9, ফায়ারফক্স, ক্রোম এবং অপেরা উপর পরীক্ষিত


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

আমার সমাধান প্রতিক্রিয়া https://.com/a/9491141 এ ভিত্তি করে।

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

<form method="post" action="">
  <button type="submit" name="useraction" value="2nd" class="default-button-handler" aria-hidden="true" tabindex="-1"></button>
  <div class="form-group">
    <label for="test-input">Focus into this input: </label>
    <input type="text" id="test-input" class="form-control" name="test-input" placeholder="Focus in here and press enter / go" />
  </div>

DOM এর প্রথম বোতাম DOM এর দ্বিতীয় বোতাম DOM এর তৃতীয় বোতামে

এই সমাধান জন্য অপরিহার্য সিএসএস:

.default-button-handler {
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  margin: 0;
}

সেট type=submit বোতামে type=submit যা আপনি ডিফল্ট করতে চান এবং অন্য type=button । এখন নিচের ফর্মটিতে আপনি যে কোনও ইনপুট ক্ষেত্রগুলিতে Enter টি আঘাত করতে পারেন এবং Render বোতামটি কাজ করবে (এটি ফর্মের দ্বিতীয় বোতামটি সত্ত্বেও)।

উদাহরণ:

    <button id='close_button' class='btn btn-success'
            type=button>
      <span class='glyphicon glyphicon-edit'> </span> Edit program
    </button>
    <button id='render_button' class='btn btn-primary'
            type=submit>             <!--  Here we use SUBMIT, not BUTTON -->
      <span class='glyphicon glyphicon-send'> </span> Render
    </button>

FF24 এবং ক্রোম 35 এ পরীক্ষিত।





submit-button