ENTER tuşuna basmanın web formu göndermesini nasıl önleyebilirim?

Bir ENTERtuşa basmanın web tabanlı bir uygulamada form göndermesini nasıl önlersiniz ?

[ revizyon 2012, satır içi işleyici yok, textarea enter işleme özelliğini koruyun]

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;
}

Artık şu şekilde bir tuş basma işleyicisi tanımlayabilirsiniz:
<form [...] onkeypress = "return checkEnter (event)">

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

Burada, gönderimleri durdurmak ve ayrıca geri tuşu -> geri durdurmak için kullanılabilecek bir jQuery işleyicisi. "KeyStop" nesnesindeki (keyCode: selectorString) çiftleri, varsayılan eylemlerini başlatmaması gereken düğümleri eşleştirmek için kullanılır.

Web'in erişilebilir bir yer olması gerektiğini unutmayın ve bu da klavye kullanıcılarının beklentilerini kırıyor. Yani, benim durumumda üzerinde çalıştığım web uygulaması zaten geri düğmesini sevmiyor, bu yüzden anahtar kısayolunu devre dışı bırakmak tamam. "Girmeli -> gönder" tartışması önemlidir, ancak sorulan asıl soru ile ilgili değildir.

Erişilebilirlik ve neden bunu yapmak istediğinizi düşünmek için size kalmış kod!

$(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;
 });
});

Gönderim işleyicisinden false değerini döndürmeniz yeterlidir

<form onsubmit="return false;">

veya ortada bir işleyici istiyorsanız

<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;
    }
});

Formun varsayılan gönderme davranışını iptal edecek olan bu işlevi çağırmanız gerekir. Herhangi bir giriş alanına veya olaya ekleyebilirsiniz.

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();
    }
}

ENTER tuşu yalnızca formun varsayılan gönder düğmesini etkinleştirir;

<input type="submit" />

tarayıcı form içinde bulur.

Bu nedenle bir gönderme düğmesi yok, ancak

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

DÜZENLE : Yorumlardaki tartışmaya yanıt olarak:

Yalnızca bir metin alanınız varsa bu çalışmaz - ancak bu durumda istenen davranış bu olabilir.

Diğer bir sorun, bunun formu göndermek için Javascript'e dayanmasıdır. Bu, erişilebilirlik açısından bir sorun olabilir. Bu, <input type='button'/>javascript ile yazılarak ve ardından <input type='submit' />bir<noscript> etiketin . Bu yaklaşımın dezavantajı, javascript devre dışı tarayıcılar için daha sonra ENTER form gönderme olacaktır olmasıdır. Bu durumda istenen davranışın ne olduğuna karar vermek OP'ye bağlıdır.

Javascript çağırmadan bunu yapmanın bir yolunu bilmiyorum.

Saf Javascript kısaca cevap:

<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>

Bu yalnızca input type = 'text' için "Enter" tuşa basma eylemini devre dışı bırakır. Ziyaretçiler yine de web sitesinin her yerinde "Enter" tuşunu kullanabilir.

Diğer eylemler için de "Enter" özelliğini devre dışı bırakmak istiyorsanız console.log (e); test amaçlarınız için ve kromda F12 tuşuna basın, "konsol" sekmesine gidin ve sayfadaki "geri" tuşuna basın ve hangi değerlerin döndürüldüğünü görmek için içine bakın, ardından kodu daha da geliştirmek için tüm bu parametreleri hedefleyebilirsiniz "e.target.nodeName" , "e.target.type" ve daha fazlası için ihtiyaçlarınızı karşılamak için yukarıda ...

Benzer bir soru için ayrıntılı cevabımı burada görebilirsiniz

Bu konuda, burada veya diğer yazılarda bulduğum tüm cevapların bir dezavantajı var ve bu da form öğesinde gerçek değişiklik tetikleyicisini önlüyor. Yani bu çözümleri çalıştırırsanız onchange olayı da tetiklenmez. Bu sorunun üstesinden gelmek için bu kodları değiştirdim ve kendim için aşağıdaki kodu geliştirdim. Umarım bu diğerleri için yararlı olur. Formum için "sınıf_auto_submit" adlı bir sınıf verdim ve şu JavaScript'i ekledim:

$(document).ready(function() 
{
    $('form.prevent_auto_submit input,form.prevent_auto_submit select').keypress(function(event) 
    { 
        if (event.keyCode == 13)
        {
            event.preventDefault();
            $(this).trigger("change");
        }
    });
});

Her zaman geçmişte olduğu gibi bir tuşa basma işleyicisi ile yaptım, ama bugün daha basit bir çözüme çarptı. Enter tuşu, formdaki ilk devre dışı bırakılmamış gönderme düğmesini tetikler, bu nedenle gerekli olan tek şey, göndermeye çalışan bu düğmeyi durdurmaktır:

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

Bu kadar. Tuşlara basma her zamanki gibi tarayıcı / alanlar / vb. Tarafından yapılacaktır. Giriş gönderme mantığı tetiklenirse, tarayıcı gizli gönderme düğmesini bulur ve tetikler. Javascript işleyicisi daha sonra sunumu önleyecektir.

IE8,9,10, Opera 9+, Firefox 23, Safari (PC) ve Safari (MAC) için bu çapraz tarayıcıyı yapmak için biraz zaman harcadım

JSFiddle Örneği: http://jsfiddle.net/greatbigmassive/ZyeHe/

Temel kod - Bu işlevi, formunuza ekli "onkeypress" ile çağırın ve "window.event" komutunu ona iletin.

function stopEnterSubmitting(e) {
    if (e.keyCode == 13) {
        var src = e.srcElement || e.target;
        if (src.tagName.toLowerCase() != "textarea") {
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }
        }
    }
}

stopSubmitOnEnter (e) {
  var eve = e || window.event;
  var keycode = eve.keyCode || eve.which || eve.charCode;

  if (keycode == 13) {
    eve.cancelBubble = true;
    eve.returnValue = false;

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

    return false;
  }
}

Sonra formunuzda:

<form id="foo" onkeypress="stopSubmitOnEnter(e);">

Yine de, rahatsız edici JavaScript kullanmasanız daha iyi olurdu.

Benim durumumda, bu jQuery JavaScript sorunu çözdü

jQuery(function() {
            jQuery("form.myform").submit(function(event) {
               event.preventDefault();
               return false;
            });
}

Form göndermek için "ENTER" komutunu engellemek bazı kullanıcılarınızı rahatsız edebilir. Bu nedenle, aşağıdaki prosedürü uygularsanız daha iyi olur:

Form etiketinize 'onSubmit' etkinliğini yazın:

<form name="formname" id="formId" onSubmit="return testSubmit()" ...>
 ....
 ....
 ....
</form>

Javascript işlevini aşağıdaki gibi yazın:

function testSubmit(){
  if(jQuery("#formId").valid())
      {
        return true;
      }
       return false;

     } 

     (OR)

Nedeni ne olursa olsun, Enter tuşuna basarken form gönderilmesini önlemek istiyorsanız, javascript'te aşağıdaki işlevi yazabilirsiniz:

    $(document).ready(function() {
          $(window).keydown(function(event){
          if(event.keyCode == 13) {
               event.preventDefault();
               return false;
              }
           });
         });

Teşekkürler.

Bu etiketi formunuza ekleyin - onsubmit="return false;" Ardından formunuzu yalnızca bazı JavaScript işlevleriyle gönderebilirsiniz.

enterA textareaveya tuşlarına basarken form gönderilmesini önlemek içininput alanın, elemanın tipi etkinliği göndermiş olanı bulmak için olay göndermek kontrol edin.

örnek 1

HTML

<button type="submit" form="my-form">Submit</button>
<form id="my-form">
...
</form>

jQuery

$(document).on('submit', 'form', function(e) {
    if (e.delegateTarget.activeElement.type!=="submit") {
        e.preventDefault();
    }
});

Daha iyi bir çözüm, bir gönderme düğmeniz yoksa ve etkinliği normal bir düğmeyle çalıştırmanızdır. Daha iyidir çünkü birinci sınavda 2 teslim olayı başlatılmaktadır, ancak ikinci örnekte sadece 1 başvuru olayı başlatılmaktadır.

ÖRNEK 2

HTML

<button type="button" onclick="$('#my-form').submit();">Submit</button>
<form id="my-form">
...
</form>

jQuery

$(document).on('submit', 'form', function(e) {
    if (e.delegateTarget.activeElement.localName!=="button") {
        e.preventDefault();
    }
});

Bunu daha basit ve kullanışlı bulacaksınız: D

$(document).on('submit', 'form', function(e){
    /* on form submit find the trigger */
    if( $(e.delegateTarget.activeElement).not('input, textarea').length == 0 ){
        /* if the trigger is not between selectors list, return super false */
        e.preventDefault();
        return false;
    } 
});

Nasıl olur:

<asp:Button ID="button" UseSubmitBehavior="false"/>

Lütfen bu makaleye bakın ENTER tuşuna basılmasının web formu göndermesi nasıl önlenir?

$(“.pc_prevent_submit”).ready(function() {
  $(window).keydown(function(event) {
    if (event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class=”pc_prevent_submit” action=”” method=”post”>
  <input type=”text” name=”username”>
  <input type=”password” name=”userpassword”>
  <input type=”submit” value=”submit”>
</form>

Javascript bir form üzerinde tuşunu tuzak ve hatta kabarcıklanma önlemek, sanırım. Bir web sayfasında ENTER temel olarak seçili denetimin yerleştirildiği formu gönderir.

Bu bağlantı, Chrome, FF ve IE9'da benim için çalışan bir çözüm ve ayrıca IE9'un geliştirici aracı (F12) ile birlikte gelen IE7 ve 8 için emülatörde çalıştı.

http://webcheatsheet.com/javascript/disable_enter_key.php

Başka bir yaklaşım, giriş gönderme düğmesini forma yalnızca sunulması gerektiğinde eklemek ve form doldurma sırasında basit bir div ile değiştirmek

Bu özelliği FORM etiketinize eklemeniz yeterlidir:

onsubmit="return gbCanSubmit;"

Ardından, SCRIPT etiketinize şunu ekleyin:

var gbCanSubmit = false;

Ardından, bir düğme yaptığınızda veya başka bir nedenle (bir işlevde olduğu gibi) bir gönderime izin verdiğinizde, küresel boole'yi çevirin ve bu örneğe benzer şekilde bir .submit () çağrısı yapın:

function submitClick(){

  // error handler code goes here and return false if bad data

  // okay, proceed...
  gbCanSubmit = true;
  $('#myform').submit(); // jQuery example

}

Ben gönderildiğinde aynı php dosyasında farklı şeyler yapmak, böylece farklı 'isim' değerleri ile birden fazla gönderme düğmeleri var, çünkü kendim bu rastladım. Bu değerler gönderilmediğinden enter/ returndüğmesi bunu keser. Ben de düşünüyordum, enter/ returndüğmesi formdaki ilk gönderme düğmesini etkinleştiriyor mu? Bu şekilde, gizli veya yürütme php dosyasını içindeki formla birlikte sayfaya geri döndüren bir 'ad' değerine sahip bir 'vanilya' gönderme düğmesine sahip olabilirsiniz. Veya tuşa basmanın etkinleştirdiği varsayılan (gizli) 'ad' değeri ve gönderme düğmeleri kendi 'ad' değerlerinin üzerine yazılır. Sadece bir düşünce.

Nasıl olur:

<script>
function isok(e) {
  var name = e.explicitOriginalTarget.name;
  if (name == "button") {
    return true
  }
  return false;
}
</script>
<form onsubmit="return isok(event);">
<input type="text" name="serial"/>
<input type="submit" name="button" value="Create Thing"/>
</form>

Ve sadece düğmenizi doğru adlandırın ve yine de gönderecektir, ancak birinde dönüşe tıkladığınızda metin alanları, örneğin explicitOriginalTarget, doğru ada sahip olmayacaktır.

Bu benim için çalıştı.
onkeydown = "return! (event.keyCode == 13)"

    <form id="form1" runat="server" onkeydown="return !(event.keyCode==13)">

   </form>

İşte böyle yapardım:

window.addEventListener('keydown', function(event)
{
    if (event.key === "Enter")
    {
        if(event.target.type !== 'submit')
        {
            event.preventDefault();
            return false;
        }
    }
}

javascript harici dosyasına koymak

   (function ($) {
 $(window).keydown(function (event) {  

    if (event.keyCode == 13) {

        return false;
    }
});

 })(jQuery);

veya vücut etiketinin içinde bir yerde

<script>


$(document).ready(function() {
    $(window).keydown(function(event) {
        alert(1);

        if(event.keyCode == 13) {

            return false;
        }
    });
});

</script>

Aynı sorunu yaşadım (tonlarca metin alanı ve vasıfsız kullanıcı içeren formlar).

Bu şekilde çözdüm:

function chkSubmit() {
    if (window.confirm('Do you want to store the data?')) {
        return true;
    } else {
        // some code to focus on a specific field
        return false;
    }
}

HTML kodunda bunu kullanarak:

<form
    action="go.php" 
    method="post"
    accept-charset="utf-8"  
    enctype="multipart/form-data"
    onsubmit="return chkSubmit()"
>

Bu şekilde ENTERanahtar planlandığı gibi çalışır, ancak bir onay (bir saniyeENTER genellikle dokunuş) gerekir.

Okuyuculara ENTER, formda kalmaya karar verirse kullanıcıyı baskı yaptığı alanda gönderen bir senaryo arayışı bırakıyorum .