full - html form




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

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>

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

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

<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" এ "পূর্ব" থাকে; স্বাভাবিক, এটি ফর্ম প্রথম জমা বাটন। আমি ব্যবহারকারীর এন্টার বোতামের মাধ্যমে ফর্মটি জমা দেওয়ার সময় "পরবর্তী" বোতামটি ট্রিগার করতে চাই। এটি ডিফল্ট জমা বোতাম হিসাবে সেট করার মতো, যদিও এটির আগে অন্য বোতাম রয়েছে।


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, ফায়ারফক্স, ক্রোম এবং অপেরা উপর পরীক্ষিত


আপনি যদি jQuery ব্যবহার করছেন, here তৈরি করা একটি মন্তব্য থেকে এই সমাধানটি বেশ চটকদার:

$(function(){
    $('form').each(function () {
        var thisform = $(this);
        thisform.prepend(thisform.find('button.default').clone().css({
            position: 'absolute',
            left: '-999px',
            top: '-999px',
            height: 0,
            width: 0
        }));
    });
});

আপনি ডিফল্ট হতে চান বোতামে কেবল class="default" যোগ করুন। এটি ফর্মটির প্রারম্ভে ডানদিকের বাটনটির গোপন কপি রাখে।


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

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

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

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

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


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

একটি ভিন্ন সমাধান হল সামান্য পরিচিত 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>

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





submit-button