সাবমিট বাটন ছাড়াই এন্টার টিপে একটি ফর্ম জমা দেওয়া

Question

আচ্ছা, আমি এন্টার টিপে একটি জমা দেওয়ার চেষ্টা করছি তবে জমা বোতামটি প্রদর্শন করে না। আমি সম্ভব হলে জাভাস্ক্রিপ্টে উঠতে চাই না যেহেতু আমি সমস্ত ব্রাউজারগুলিতে সবকিছু কাজ করতে চাই (ইভেন্টগুলির সাথে আমার জানা একমাত্র জেএস উপায়)।

এই মুহূর্তে ফর্মটি দেখতে এমন দেখাচ্ছে:

<form name="loginBox" target="#here" method="post">
    <input name="username" type="text" /><br />
    <input name="password" type="password" />
    <input type="submit" style="height: 0px; width: 0px; border: none; padding: 0px;" hidefocus="true" />
</form>

যা বেশ ভাল কাজ করে। সাবমিট বাটনটি ব্যবহার করে যখন ব্যবহারকারীরা টিপে প্রবেশ করে এবং ফায়ারফক্স, আইই, সাফারি, অপেরা এবং ক্রোমে বোতামটি প্রদর্শিত হয় না। তবে, আমি এখনও সমাধানটি পছন্দ করি না কারণ এটি সমস্ত ব্রাউজারের সাথে সমস্ত প্ল্যাটফর্মে কাজ করবে কিনা তা জানা শক্ত।

কেউ কি আরও ভাল পদ্ধতির পরামর্শ দিতে পারেন? বা এটি হিসাবে এটি হিসাবে হিসাবে ভাল হয়?

Comments

ছোট পয়েন্ট যা আপনার সিএসএসের বাইরে কয়েকটি অক্ষর শেভ করতে পারে এবং সাধারণত স্বয়ংক্রিয়ভাবে মিনিফায়ার হয়ে যায় - আপনার শূন্য দৈর্ঘ্যের পরিমাপের জন্য ইউনিট লাগবে না। 0 পিএক্স = 0 পিপি = 0 এম = 0 এম ইত্যাদি

— পিডব্লুডেস্ট

@pwdst এটি দেখানোর জন্য ধন্যবাদ - আমি পাইথন ওয়ার্ল্ড থেকে এসেছি, সুতরাং "স্পষ্টকৃতের চেয়েও ভাল ভাল", এবং সত্যই ভাবছেন যে সিএসএসের ক্ষেত্রে এটি কি, বা সিএসএস নির্মাতাদের কি আলাদা আইডিয়ম আছে?

— এরিকমজল

শূন্য এখানে নিয়মের ব্যতিক্রম @ @ মেরিক্মজল - 0 পিক্স == 0 এম == 0% == 0 ভিএইচ == 0 ভিএইচ ইত্যাদি। অন্যান্য (শূন্য নয়) দৈর্ঘ্যের পরিমাপে এটি কেবল খারাপ অনুশীলনই নয় তবে ইউনিট নির্দিষ্ট না করার মানদণ্ডের বিরুদ্ধেও এবং আপনি ব্যবহারকারীর এজেন্টগুলিতে (ব্রাউজারগুলি) বিভিন্ন আচরণ দেখতে পাবেন। দেখুন developer.mozilla.org/en-US/docs/Web/CSS/length এবং drafts.csswg.org/css-values-3/#lengths

— pwdst

যদি সন্দেহ হয়, তবে অন্য কথায় একটি স্পষ্ট দৈর্ঘ্যের একক রাখুন।

— pwdst

যদিও এটি ইউনিটটি 0 দিয়ে যুক্ত করতে অবশ্যই ক্ষতিগ্রস্থ হবে না, ভাষা নির্বিশেষে এর 100% বৈধ হওয়া উচিত নয়, বাস্তবে সমস্তভাবে গাণিতিক বিমূর্ততায় ফিরে আসা উচিত। ওটিওএইচ, বনামের না থাকার একটি সহজ ব্যবহার হ'ল প্রদত্ত সম্পত্তিটি "আসলেই 0 হবে" এবং এইভাবেই থাকবে "(কোনও ইউনিট নেই)" বনাম "বার্তাটি পৌঁছে দেওয়া," জিনিসটি এখন শূন্য হয়ে গেছে, তবে স্বাদে সামঞ্জস্য হতে পারে; বা যা কিছু ... "(ইউনিট সহ)।

— জেড

Answer 1

চেষ্টা করুন:

<input type="submit" style="position: absolute; left: -9999px"/>

এটি স্ক্রিনের বাইরে বাম দিকে waaay বোতামটি চাপ দেবে। এর সাথে দুর্দান্ত জিনিসটি হ'ল সিএসএস অক্ষম হয়ে গেলে আপনি কৃপণ অবনতি পেতে পারেন।

আপডেট - আই 7 এর জন্য কার্যকারিতা

ব্রায়ান ডাউনিং + এর পরামর্শ অনুসারে tabindexট্যাবটি এই বোতামে পৌঁছানোর জন্য আটকে রাখতে (অ্যাটেস গোরাল দ্বারা):

<input type="submit" 
       style="position: absolute; left: -9999px; width: 1px; height: 1px;"
       tabindex="-1" />

Comments

ইরেবাসের মতো একই ফলাফলের সাথে আইই 7-তে এই সমাধানটি চেষ্টা করে দেখেছেন। নিম্নলিখিত কোডটি এটি ঠিক করে:position: absolute; width: 1px; height: 1px; left: -9999px;

— ব্রায়ান ডাউনিং

কী ভয়াবহ হ্যাক :( এইচটিএমএল প্রথম স্থানে কেন? এক্ষেত্রে কাজ না করার জন্য কোনও ভাল কারণ আছে?

— উত্তর

@ নরনাগন: আপনি যদি এই হ্যাকটি ভয়ঙ্কর বলে মনে করেন তবে নির্দ্বিধায় একটি কম ভয়ঙ্কর। এইচটিএমএল এটি যা ...

— এটেস গোরাল

@MooseFactorytabindex="-1"

— Ates Goral

"দুর্দান্ত জিনিসটি হ'ল সিএসএস অক্ষম হয়ে গেলে গ্রেফিউর অবক্ষয়" ?! আমি নিশ্চিত বলতে চাই, এটি দুর্দান্ত কাজ করে তবে "ক্রেফুল অবক্ষয়" অংশটি কেবল বিপণনের কৌশল। ২০০২ সাল থেকে এই পৃষ্ঠাটি না পাওয়া পর্যন্ত আমি এটির বিষয়েও শুনিনি । এটা ঠিক যে, "ব্রাউজারে সিএসএস অক্ষম করা হয়েছে" এর জন্য প্রথম পৃষ্ঠায় একমাত্র গুগলের ফলাফলটি 10 বছর আগে (বা এই উত্তরটি 2009 সালে প্রকাশ করা হয়েছিল) থেকে এসেছে।

— ভিকি চিজওয়ানি

Answer 2

আমার মনে হয় আপনি উচিত জাভাস্ক্রিপ্ট রুট যান, অথবা অন্তত আমি করব:

<script type="text/javascript">
// Using jQuery.

$(function() {
    $('form').each(function() {
        $(this).find('input').keypress(function(e) {
            // Enter pressed?
            if(e.which == 10 || e.which == 13) {
                this.form.submit();
            }
        });

        $(this).find('input[type=submit]').hide();
    });
});
</script>


<form name="loginBox" target="#here" method="post">
    <input name="username" type="text" /><br />
    <input name="password" type="password" />
    <input type="submit" />
</form>

Comments

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

— andyk

এটি জমা দেওয়ার বোতামটি এক মুহুর্তের জন্য প্রদর্শিত হবে (পৃষ্ঠাটি লোড না করে এবং জেএস চালিত না হওয়া পর্যন্ত)।

— নর্নাগন

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

— সিগবর্মার

আমি আরও বিস্তৃত সমর্থন keydownথেকে keypressসরিয়েছি, তবে আপনি যদি ক্রোমকে সমর্থন করেন বলে আশা e.preventDefault();করেন ifতবে আপনাকে এর আগেও যুক্ত করতে হবে।

— ক্যাম্পবেল

@ ক্যাম্পবেল আপনি তার .on('keypress'...)পরিবর্তে ব্যবহার করতে সক্ষম হতে পারেন । দেখার জন্য দস্তাবেজগুলি .on()এটি .preventDefault()আপনাকে কল করে ।

— জিংলেষ্টুলা

Answer 3

আপনি কি এই চেষ্টা করেছেন?

<input type="submit" style="visibility: hidden;" />

যেহেতু বেশিরভাগ ব্রাউজারগুলি বুঝতে পারে visibility:hiddenএবং এটি সত্যিকারের মতো কাজ করে না display:none, তাই আমি অনুমান করছি যে এটি ঠিক হওয়া উচিত। সত্যই এটি নিজে পরীক্ষা করা হয়নি, তাই সিএমআইআইডাব্লু।

Comments

প্রায় এক জিনিস visibility: hidden: যেমন আপনি পড়তে পারেন W3Schools , visibity: None এখনও বিন্যাস প্রভাবিত করে। আপনি যদি এই সাদা স্থানটি এড়াতে চান তবে পরম অবস্থানের সমাধানটি আমার পক্ষে ভাল বলে মনে হচ্ছে।

— লয়বার্ট

আপনি উভয় সমাধান একত্রিত করতে পারেন:<input type="submit" style="visibility: hidden; position: absolute;" />

— ভ্যাক্ল্যাভসির

ধিক্কার position: absolute; left: -100px; width: 1px; height: 1px;

— জানায়, এটি আইই

Answer 4

জমা বোতাম ছাড়াই অন্য একটি সমাধান:

এইচটিএমএল

<form>
  <input class="submit_on_enter" type="text" name="q" placeholder="Search...">
</form>

jQuery এর

$(document).ready(function() {

  $('.submit_on_enter').keydown(function(event) {
    // enter has keyCode = 13, change it if you want to use another button
    if (event.keyCode == 13) {
      this.form.submit();
      return false;
    }
  });

});

Comments

অদ্ভুত কৌশল। আপনি আপনার বোতামটি একটি পাঠ্য বাক্সে পরিণত করেছেন! কৌশলটি যেহেতু সমস্ত ব্রাউজারের জন্য কাজ করে, তাই আমি আপনাকে জমা দিয়েছি!

— জেনা লিফ

ধন্যবাদ @ জেনাএলএফ ;-) যাইহোক আমি মনে করি এটি এত অদ্ভুত নয় - প্রচুর অনলাইন ফর্মগুলি কী-ডাউনডের কেবল "ট্রিগার" জমা দেওয়ার জন্য ব্যবহার করে। গুগল সার্চ-বারের একটি উদাহরণ হতে পারে (সম্ভবত তারা ঠিক এই কোডটি ব্যবহার করে না তবে সম্ভবত কিছু অনুরূপ)।

— দামোইজার

Answer 5

ভবিষ্যতে এই উত্তরটি দেখার জন্য যে কেউ, HTML5 ফর্ম উপাদানগুলির জন্য একটি নতুন বৈশিষ্ট্য hiddenপ্রয়োগ display:noneকরে , যা স্বয়ংক্রিয়ভাবে আপনার উপাদানটিতে প্রয়োগ হবে ।

যেমন

<input type="submit" hidden />

Comments

যদিও এটি ডেস্কটপ ক্রোমের সাথে কাজ করছে বলে মনে হচ্ছে, এটি আইফোনে ক্রোম বা সাফারি দিয়ে কাজ করছে বলে মনে হচ্ছে না।

— উলফ অ্যাডামস

@ উলফাডামস এটি আইফোন 12.1.2 এ ক্রোম এবং সাফারির সাথে কাজ করে।

— ম্যাথু ক্যাম্পবেল

Answer 6

নিম্নলিখিত কোড ব্যবহার করুন, এটি সমস্ত 3 ব্রাউজারে (এফএফ, আইই এবং ক্রোম) আমার সমস্যার সমাধান করেছে:

<input  type="submit" name="update" value=" Apply " 
    style="position: absolute; height: 0px; width: 0px; border: none; padding: 0px;"
    hidefocus="true" tabindex="-1"/>

নাম এবং মানের যথাযথ মান সহ আপনার কোডের প্রথম লাইন হিসাবে উপরের রেখাকে যুক্ত করুন।

Answer 7

আপনি বর্তমানে বোতামটি আড়াল করতে ব্যবহার করেন এমন হ্যাকের পরিবর্তে visibility: collapse;শৈলীর বৈশিষ্ট্যটি সেট করা আরও সহজ । তবে, আমি ফর্মটি জমা দেওয়ার জন্য কিছুটা সহজ জাভাস্ক্রিপ্ট ব্যবহার করার পরামর্শ দেব। আমি যতদূর বুঝতে পারি, আজকাল এই জাতীয় জিনিসগুলির জন্য সমর্থন সর্বব্যাপী।

Answer 8

গোপন বৈশিষ্ট্যটিকে সত্যে সেট করুন:

<form name="loginBox" target="#here" method="post">
    <input name="username" type="text" /><br />
    <input name="password" type="password" />
    <input type="submit" hidden="true" />
</form>

Comments

এন্ট্রি টিপে ইম্রিবিউট লুকানো জমা অক্ষম করে।

— 66Ton99

@ 66Ton99 এফএফ-তে সবেমাত্র পরীক্ষা করুন। এটি জমা দিতে অক্ষম করে না

— ইউজেন কনকভ

"এটি আমার মেশিনে কাজ করে";) ফায়ারফক্সের চেয়ে অনেক বেশি ব্রাউজার রয়েছে। কেউ যুক্তিযুক্তভাবে এমন একটি সমাধান চান যা নির্ভরযোগ্যভাবে ক্রস ব্রাউজারের ভিত্তিতে কাজ করে।

— ফলিক্স গ্যাগন-গ্রেনিয়ার

ক্রোমে 63 এ কাজ করে

— piotr_cz

এই মুহূর্তে আইফোনে ক্রোম বা সাফারি তে কাজ করে না।

— উলফ অ্যাডামস

Answer 9

এটি করার সর্বাধিক মার্জিত উপায় হ'ল সাবমিট-বোতামটি রাখা, তবে এটির সীমানা, প্যাডিং এবং ফন্ট-আকার 0 এ সেট করুন।

এটি বোতামের মাত্রা 0x0 করে দেবে।

<input type="submit" style="border:0; padding:0; font-size:0">

আপনি নিজে এটি চেষ্টা করে দেখতে পারেন এবং উপাদানটির একটি রূপরেখা সেট করে আপনি একটি বিন্দু দেখতে পাবেন যা বাইরের সীমানাটি 0x0 px উপাদানটিকে "পার্শ্ববর্তী" করে।

দৃশ্যমানতার প্রয়োজন নেই: লুকানো, তবে এটি যদি আপনাকে রাতে ঘুমায়, আপনি এটি মিশ্রণেও ফেলে দিতে পারেন।

জেএস ফিডল

Answer 10

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

<input type="image" src="img/1x1trans.gif"/>

Answer 11

এটি আমার সমাধান, ক্রোম, ফায়ারফক্স 6 এবং আই 7 + এ পরীক্ষিত:

.hidden{
    height: 1px;
    width: 1px;
    position: absolute;
    z-index: -100;
}

Comments

আই 8 এর মতো অবস্থানটি পছন্দ করে না বলে মনে হচ্ছে: পরম, এটি জমা দেয় না।

— ম্যাক্সেক্সিম

Answer 12

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

এটি সূক্ষ্মভাবে কাজ করে এবং এটি আপনি অর্জন করার চেষ্টা করছেন তার সর্বাধিক স্পষ্ট সংস্করণ।

নোট করুন যে অন্য ফর্ম উপাদানগুলির মধ্যে display:noneএবং এর মধ্যে একটি পার্থক্য রয়েছে visibility:hidden।

Answer 13

এইচটিএমএল 5 সমাধান

<input type="submit" hidden />

Comments

উপরের মতো একই - আইফোনে ক্রোম বা সাফারি দিয়ে কাজ করে না।

— উলফ অ্যাডামস

Answer 14

সহজ উপায়

<input type="submit" style="width:0px; height:0px; opacity:0;"/>

Answer 15

আইই ও যাদের সমস্যা রয়েছে তাদের ক্ষেত্রেও।

{
    float: left;
    width: 1px;
    height: 1px;
    background-color: transparent;
    border: none;
}

Comments

আমি এখনও অবস্থান ব্যবহার করব: নিখুঁত, ভাসা লেআউটটিকে প্রভাবিত করে।

— সুপারডাক

আই 8 এর মতো অবস্থানটি পছন্দ করে না বলে মনে হচ্ছে: পরম, এটি জমা দেয় না। আমি ব্যবহার করি:

— ম্যাক্সিম্যাকিম

একই জন্য float: left;, সরানো হলে, এটি জমা দেয়।

— ম্যাক্সেক্সিম

Answer 16

আপনি এটি চেষ্টা করতে পারেন

<INPUT TYPE="image" SRC="0piximage.gif" HEIGHT="0" WIDTH="0" BORDER="0">

আপনি প্রস্থ / উচ্চতা = 0 পিক্স সহ একটি চিত্র অন্তর্ভুক্ত করতে পারেন

Comments

গুরুত্বপূর্ণ: আপনার অবশ্যই একটি বৈধ চিত্রের URL ব্যবহার করতে হবে বা ফায়ারফক্স আপনার পৃষ্ঠায় একটি "প্রশ্ন জমা দিন" পাঠ্য দেখায়

— পিএইচ।

আপনি যদি বিদ্যমান কোনও চিত্র যুক্ত করেন এবং উচ্চতা এবং প্রস্থটি শূন্যে সেট করেন বা অস্তিত্বযুক্ত চিত্র যুক্ত করেন তবে ব্রাউজারটিকে সংস্থানটির জন্য নষ্ট জিইটি অনুরোধ করতে হবে।

— পিডব্লুডেস্ট

Answer 17

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

বুটস্ট্র্যাপ

<input type="submit" class="sr-only" tabindex="-1">

কৌণিক উপাদান

<input type="submit" class="cdk-visually-hidden" tabindex="-1">

উজ্জ্বল মন যারা এই ফ্রেমওয়ার্কগুলি তৈরি করেছে তারা এই স্টাইলগুলি নীচে সংজ্ঞায়িত করেছেন:

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cdk-visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
}

Answer 18

আমি এটি ডকুমেন্ট প্রস্তুত একটি ফাংশন এ যুক্ত। যদি ফর্মটিতে জমা দেওয়ার বোতাম না থাকে (আমার সমস্ত জ্যাকুরি ডায়ালগ ফর্মগুলিতে জমা বোতাম নেই) তবে এটি যুক্ত করুন।

$(document).ready(function (){
    addHiddenSubmitButtonsSoICanHitEnter();
});
function addHiddenSubmitButtonsSoICanHitEnter(){
    var hiddenSubmit = "<input type='submit' style='position: absolute; left: -9999px; width: 1px; height: 1px;' tabindex='-1'/>";
    $("form").each(function(i,el){
        if($(this).find(":submit").length==0)
            $(this).append(hiddenSubmit);
    });
}

Answer 19

input.on('keypress', function(event) {
    if ( event.which === 13 ) {
        form.submit();
        return false;
    }
});

Answer 20

আমি ব্যবহার করেছি:

<input class="hidden" type="submit" value="" 
onclick="document.getElementById('loginform').submit();"/>

এবং:

 .hidden {
        border:0;
        padding:0;
        font-size:0;
        width: 0px;
        height: 0px;
    }

.css ফাইলে। এটি আমার জন্যও জাদুকরভাবে কাজ করেছিল। :)