جاوااسکریپت - چگونه میتوان از ارسال فرم وب با فشار دادن کلید ENTER جلوگیری کرد؟

چگونه میتوانید از ارسال فرم با فشردن کلید ENTER در یک برنامه وب جلوگیری کنید؟

پاسخ شماره ۱

[بازبینی ۲۰۱۲، بدون هندلر خطی، حفظ مدیریت کلید Enter در textarea]

function checkEnter(e){
 e = e || event;
 var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
 return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}

حالا میتوانید یک هندلر فشار کلید روی فرم تعریف کنید:
<form [...] onkeypress="return checkEnter(event)">

document.querySelector('form').onkeypress = checkEnter;

[بازبینی 2024، رویکردی کمی مدرنتر (ES20xx)، با استفاده از نمایندگی رویداد]

document.addEventListener(`keypress`, handle);

function handle(evt) {
  const form = evt.target.closest(`#testForm`);
  if (form) {
    if (evt.target.dataset.enterForSubmit) {
      if (evt.key === `Enter`) {
        evt.preventDefault();
        return logClear(`won't submit "${evt.target.value}"`);
      }
      return true;
    }
  }
}

function logClear(...txt) {
  console.clear();
  console.log(...txt);
}

input {
  width: 90vw;
}

<form id="testForm" action="https://www.google.com/search">
  <input data-enter-for-submit="1" 
    placeholder="enter text, try using enter to submit">
</form>

پاسخ شماره ۲

در اینجا یک هندلر jQuery وجود دارد که میتواند برای جلوگیری از ارسال با کلید Enter و همچنین جلوگیری از بازگشت با کلید Backspace استفاده شود. جفتهای (keyCode: selectorString) در شیء "keyStop" برای مطابقت با نودهایی استفاده میشوند که نباید عملیات پیشفرض خود را اجرا کنند.

به یاد داشته باشید که وب باید یک مکان قابل دسترسی باشد و این امر انتظارات کاربران صفحهکلید را نقض میکند. با این حال، در مورد من، برنامه وبی که روی آن کار میکنم به هر حال دکمه بازگشت را دوست ندارد، بنابراین غیرفعال کردن کلید میانبر آن مشکلی ندارد. بحث "باید با Enter -> ارسال شود" مهم است، اما به سؤال واقعی پرسیده شده مرتبط نیست.

اینجا کد است، با خودت است که به دسترسی فکر کنی و چرا واقعاً میخواهی این کار را انجام دهی!

$(function(){
 var keyStop = {
   8: ":not(input:text, textarea, input:file, input:password)", // stop backspace = back
   13: "input:text, input:password", // stop enter = submit 

   end: null
 };
 $(document).bind("keydown", function(event){
  var selector = keyStop[event.which];

  if(selector !== undefined && $(event.target).is(selector)) {
      event.preventDefault(); //stop event
  }
  return true;
 });
});

پاسخ شماره ۳

به سادگی مقدار false را از تابع onsubmit بازگردانید

<form onsubmit="return false;">

یا اگر میخواهید یک هندلر در وسط داشته باشید

<script>
var submitHandler = function() {
  // do stuff
  return false;
}
</script>
<form onsubmit="return submitHandler()">

پاسخ شماره ۴

//Turn off submit on "Enter" key

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        $("#btnSearch").attr('value');
        //add more buttons here
        return false;
    }
});

پاسخ شماره ۵

شما باید این تابع را صدا بزنید که فقط رفتار پیشفرض ارسال فرم را لغو میکند. شما میتوانید آن را به هر فیلد ورودی یا رویدادی متصل کنید.

function doNothing() {  
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
    if( keyCode == 13 ) {


    if(!e) var e = window.event;

    e.cancelBubble = true;
    e.returnValue = false;

    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}

پاسخ شماره ۶

به طور خلاصه پاسخ در جاوااسکریپت خالص این است:

<script type="text/javascript">
    window.addEventListener('keydown', function(e) {
        if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
            if (e.target.nodeName == 'INPUT' && e.target.type == 'text') {
                e.preventDefault();
                return false;
            }
        }
    }, true);
</script>

این فقط عمل فشار کلید «Enter» را برای نوع ورودی='text' غیرفعال میکند. بازدیدکنندگان هنوز میتوانند از کلید «Enter» در سراسر وبسایت استفاده کنند.

اگر میخواهید کلید «Enter» را برای سایر اقدامات نیز غیرفعال کنید، میتوانید برای اهداف آزمایشی خود console.log(e); را اضافه کنید، و در مرورگر کروم کلید F12 را فشار دهید، به تب «console» بروید و کلید «backspace» را در صفحه فشار دهید و داخل آن را نگاه کنید تا ببینید چه مقادیری بازگردانده میشوند، سپس میتوانید تمام آن پارامترها را هدف قرار دهید تا کد فوق را بیشتر به نیازهای خود برای "e.target.nodeName"، "e.target.type" و بسیاری موارد دیگر بهینه کنید...

پاسخ مفصل من به یک سؤال مشابه را اینجا ببینید

پاسخ شماره ۷

کلید ENTER فقط دکمه ارسال پیشفرض فرم را فعال میکند، که اولین دکمه خواهد بود

<input type="submit" />

مرورگر در داخل فرم پیدا میکند.

بنابراین دکمه ارسال نداشته باشید، اما چیزی شبیه به

<input type="button" value="Submit" onclick="submitform()" /> 

ویرایش: در پاسخ به بحث در نظرات:

این کار اگر فقط یک فیلد متنی داشته باشید کار نمیکند - اما ممکن است که این رفتار مورد نظر در آن صورت باشد.

مسئله دیگر این است که این روش برای ارسال فرم به جاوااسکریپت متکی است. از دیدگاه دسترسپذیری، این میتواند یک مشکل باشد. این مشکل میتواند با نوشتن <input type='button'/> با جاوااسکریپت حل شود و سپس یک <input type='submit' /> داخل یک تگ <noscript> قرار داده شود. نقطه ضعف این روش این است که در مرورگرهایی که جاوااسکریپت غیرفعال است، فرم با زدن ENTER ارسال میشود. تصمیمگیری در مورد رفتار موردنظر در این حالت بر عهده OP است.

من هیچ روشی برای انجام این کار بدون فراخوانی جاوااسکریپت نمیدانم.

پاسخ شماره ۸

من همیشه در گذشته این کار را با یک هندلر فشردن کلید مانند نمونه بالا انجام میدادم، اما امروز به یک راهحل سادهتر برخوردم. کلید Enter فقط اولین دکمه ارسال غیرغیرفعال روی فرم را فعال میکند، بنابراین در واقع تمام کاری که لازم است این است که جلوی آن دکمه را که تلاش میکند فرم را ارسال کند بگیریم:

<form>
  <div style="display: none;">
    <input type="submit" name="prevent-enter-submit" onclick="return false;">
  </div>
  <!-- rest of your form markup -->
</form>

همین است. فشار دادن کلیدها به صورت معمول توسط مرورگر/فیلدها/و غیره مدیریت خواهد شد. اگر منطق ارسال با Enter فعال شود، مرورگر آن دکمه ارسال مخفی را پیدا کرده و آن را فعال خواهد کرد. و سپس پردازشگر جاوااسکریپت ارسال را متوقف خواهد کرد.