Kullanıcıların Enter'a basarak form göndermelerini önleme

Bir web sitesinde bir anketim var ve kullanıcıların enter düğmesine (nedenini bilmiyorum) çarpması ve yanlışlıkla anketi (formu) gönder düğmesini tıklatmadan göndermesiyle ilgili bazı sorunlar var gibi görünüyor. Bunu önlemek için bir yol var mı?

Ankette HTML, PHP 5.2.9 ve jQuery kullanıyorum.

Gibi bir yöntem kullanabilirsiniz

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

Orijinal yayındaki yorumları okurken, daha kullanışlı hale getirmek ve insanların Entertüm alanları tamamladığında baskı yapmasına izin vermek için :

function validationFunction() {
  $('input').each(function() {
    ...

  }
  if(good) {
    return true;
  }
  return false;
}

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

Enter tuşuna izin verme

<textarea>Formunuzda bir tane yoksa , aşağıdakileri ekleyin <form>:

<form ... onkeydown="return event.key != 'Enter';">

Veya jQuery ile:

$(document).on("keydown", "form", function(event) { 
    return event.key != "Enter";
});

Bu form içinde her tuşa basın üzerinde kontrol edileceğini neden olacaktır key. Değilse Enter, geri döner trueve her şey her zamanki gibi devam eder. Eğer öyleyse, Entero zaman geri döner falseve her şey hemen durur, böylece form gönderilmez.

keydownOlay yerine tercih edilebilir keyupolarak keyupçok geç blok formuna göndermektir. Tarihsel olarak da vardı keypress, ama bu olduğu gibi, reddedildi KeyboardEvent.keyCode. Bunun KeyboardEvent.keyyerine, basılan tuşun adını döndüren anahtarını kullanmalısınız. Ne zamanEnter kontrol edilir, sonra bu 13 (normal girin) kontrol yanı 108 olarak (sayısal tuş takımı girin) olacaktır.

O Not $(window)yerine diğer bazı cevaplar önerildiği üzere bir $(document)çalışmıyor keydown/ 'keyup Eğer sıra bu fakir kullanıcıları kapsayacak şekilde gibisin eğer öyleyse bu en iyi bir seçimdir, IE <= 8'de.

Yalnızca textareas'ta anahtar girmeye izin ver

<textarea>Formunuzda bir varsa (elbette Enter tuşunu kabul etmesi gerekir ), o zaman a olmayan her giriş elemanına tuş takımı işleyicisini ekleyin <textarea>.

<input ... onkeydown="return event.key != 'Enter';">
<select ... onkeydown="return event.key != 'Enter';">
...

Isıcam plakasını azaltmak için jQuery ile yapılması daha iyidir:

$(document).on("keydown", ":input:not(textarea)", function(event) {
    return event.key != "Enter";
});

Herhangi bir nedenle enter tuşuna çağırmak istediğiniz bu giriş öğelerine eklenmiş başka olay işleyicisi işlevleriniz varsa, yalnızca yanlış döndürmek yerine etkinliğin varsayılan davranışını önleyin, böylece diğer işleyicilere düzgün şekilde yayılabilir.

$(document).on("keydown", ":input:not(textarea)", function(event) {
    if (event.key == "Enter") {
        event.preventDefault();
    }
});

Textareas'ta enter tuşuna izin ver ve yalnızca düğmeleri gönder

Gönderme düğmelerinde <input|button type="submit">de enter tuşuna izin vermek isterseniz, seçiciyi her zaman aşağıdaki gibi hassaslaştırabilirsiniz.

$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {
    // ...
});

O Not input[type=text]diğer bazı cevaplar önerildiği şekilde o en iyi bir seçici, bu HTML5 metin olmayan girdileri kapsamaz.

Bölüm 4.10.22.2 W3C HTML5 spesifikasyonunun örtülü olarak sunulması :

Bir formelementin varsayılan düğme ilk Gönder düğmesini de ağaç sırayla kimin formu sahibi olmasıdır formöğesi.

Kullanıcı aracısı kullanıcının formu dolaylı olarak göndermesine izin veriyorsa (örneğin, bir metin alanı örtük olarak odaklanırken "enter" tuşuna basan bazı platformlarda formu gönderirse, bunu varsayılan düğmesi tanımlanmış bir etkinleştirme olan bir form için yaparsa) davranışı , kullanıcı aracısının bu varsayılan düğme üzerinde sentetik tıklama etkinleştirme adımlarını çalıştırmasına neden olmalıdır .

Not: Sonuç olarak, varsayılan düğme devre dışı bırakılırsa, böyle bir örtük gönderme mekanizması kullanıldığında form gönderilmez. ( Devre dışı bırakıldığında bir düğmenin etkinleştirme davranışı yoktur .)

Bu nedenle, formun örtülü olarak gönderilmesini devre dışı bırakmanın standartlara uygun bir yolu, formdaki ilk gönderme düğmesi olarak devre dışı bırakılmış bir gönderme düğmesi yerleştirmektir:

<form action="...">
  <!-- Prevent implicit submission of the form -->
  <button type="submit" disabled style="display: none" aria-hidden="true"></button>

  <!-- ... -->

  <button type="submit">Submit</button>
</form>

Bu yaklaşımın hoş bir özelliği de JavaScript olmadan çalışmasıdır ; JavaScript'in etkin olup olmadığı, örtük form gönderilmesini önlemek için standartlara uygun bir web tarayıcısı gerekir.

Formun gönderilmesini önlemek için tuşlara basmayla ilgili her üç olayı da yakalamak zorunda kaldım:

    var preventSubmit = function(event) {
        if(event.keyCode == 13) {
            console.log("caught ya!");
            event.preventDefault();
            //event.stopPropagation();
            return false;
        }
    }
    $("#search").keypress(preventSubmit);
    $("#search").keydown(preventSubmit);
    $("#search").keyup(preventSubmit);

Yukarıdakilerin hepsini güzel bir kompakt versiyonda birleştirebilirsiniz:

    $('#search').bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });

Gerçek gönderimi yapmak için bir komut dosyası kullanırsanız, gönderen işleyicisine şu şekilde "return false" satırı ekleyebilirsiniz:

<form onsubmit="return false;">

Formda JavaScript'ten () çağrıldığında etkinlik tetiklenmez.

kullanın:

$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
  if(e.keyCode == 13) {
    e.preventDefault();
    return false;
  }
});

Bu çözüm, bir web sitesindeki tüm formlarda (Ajax ile eklenen formlarda da) çalışır ve yalnızca Entergiriş metinlerinde bulunanları önler . Belgeye hazır bir işleve yerleştirin ve bu sorunu bir ömür boyu unutun.

Kullanıcıların Enterdoğal olmayan gibi görünmesini önlemek yerine formu olduğu gibi bırakabilir ve ekstra istemci tarafı doğrulaması ekleyebilirsiniz: Anket bitmediğinde sonuç sunucuya gönderilmez ve kullanıcı güzel bir mesaj alır formu tamamlamak için ne yapılması gerekiyor. JQuery kullanıyorsanız, Doğrulama eklentisini deneyin:

http://docs.jquery.com/Plugins/Validation

Bu, Enterdüğmeyi yakalamaktan daha fazla çalışma gerektirecektir , ancak kesinlikle daha zengin bir kullanıcı deneyimi sağlayacaktır.

Güzel bir basit küçük jQuery çözümü:

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        return false;
    }
});

Henüz yorum yapamam, bu yüzden yeni bir cevap göndereceğim

Kabul edilen cevap ok-ish, ancak numpad enter'da gönderme durdurulmuyordu. En azından mevcut Chrome sürümünde. Bunun için anahtar kod koşulunu değiştirmek zorunda kaldım, sonra işe yarıyor.

if(event.keyCode == 13 || event.keyCode == 169) {...}

Hedefe ulaşmak benim çözümüm, temiz ve etkili.

$('form').submit(function () {
  if ($(document.activeElement).attr('type') == 'submit')
     return true;
  else return false;
});

Tamamen farklı bir yaklaşım:

1. <button type="submit">Formdaki ilk basışta etkinleştirilecektir Enter.
2. Düğme gizlenmiş olsa bile bu doğrudur style="display:none;
3. Bu düğmenin komut dosyası false, gönderim işlemini iptal eden geri dönebilir .
4. Yine de <button type=submit>formu göndermeniz için başka bir tane olabilir . Sadece truegönderimi kademelendirmek için geri dönün .
5. EnterGerçek gönderme düğmesi odaklanmışken düğmesine basmak , gerçek gönderme düğmesini etkinleştirir.
6. Enterİçine <textarea>veya diğer form kontrollerine basmak normal şekilde davranacaktır.
7. Form denetimlerinin Enteriçine basılması <input>, ilkini tetikler <button type=submit>, bu da geri döner falseve böylece hiçbir şey olmaz.

Böylece:

<form action="...">
  <!-- insert this next line immediately after the <form> opening tag -->
  <button type=submit onclick="return false;" style="display:none;"></button>

  <!-- everything else follows as normal -->
  <!-- ... -->
  <button type=submit>Submit</button>
</form>

Forma 'javascript: void (0);' hile yapıyor gibi görünüyor

<form action="javascript:void(0);">
<input type="text" />
</form>
<script>
$(document).ready(function() {
    $(window).keydown(function(event){
        if(event.keyCode == 13) {
    alert('Hello');
        }
    });
});
</script>

Gönder düğmesi koymamak yapabilirdi. Girdiye bir komut dosyası (type = button) koymanız veya formdaki verileri göndermesini istiyorsanız eventListener eklemeniz yeterlidir.

Bunun yerine bunu kullanın

<input type="button">

bunu kullanmaktan daha

<input type="submit">

1. Girişler veya düğmeler için type = "gönder" kullanmayın .
2. Kullanım type = "button" ve kullanım js [jQuery / açısal / etc] sunucuya bir form gönderin.

Yalnızca belirli girdilerin gönderilmesini engellemem gerekiyordu, bu yüzden bir sınıf seçiciyi kullandım, buna ihtiyaç duyduğum her yerde "global" bir özellik olmasını sağladım.

<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />

Ve bu jQuery kodu:

$('.idNoEnter').keydown(function (e) {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
});

Alternatif olarak, tuş takımı yetersizse:

$('.idNoEnter').on('keypress keydown keyup', function (e) {
   if (e.keyCode == 13) {
     e.preventDefault();
   }
});

Bazı notlar:

Burada çeşitli iyi yanıtları değiştirdiğinizde, Enteranahtar keydowntüm tarayıcılarda işe yarıyor gibi görünüyor . Alternatif bind()olarak,on() yöntemi .

Ben, tüm artıları, eksileri ve performans tartışmalarını tartarak sınıf seçicilerinin büyük bir hayranıyım. Adlandırma kuralım, jQuery'nin CSS stilinden ayırmak için bir kimlik olarak kullandığını gösteren 'idSomething'.

EnterAnahtarın vurulduğunu kontrol etmek ve göndermeyi durdurmak için bir JavaScript yöntemi yapabilirsiniz .

<script type="text/javascript">
  function noenter() {
  return !(window.event && window.event.keyCode == 13); }
</script>

Sadece gönderme yönteminde arayın.

SADECE BLOK GÖNDER, ancak enter tuşunun diğer önemli işlevleri, örneğin <textarea>:

window.addEventListener('keydown', function(event) {
  //set default value for variable that will hold the status of keypress
  pressedEnter = false;

  //if user pressed enter, set the variable to true
  if (event.keyCode == 13)
    pressedEnter = true;

  //we want forms to disable submit for a tenth of a second only
  setTimeout(function() {
    pressedEnter = false;
  }, 100)

})

//find all forms
var forms = document.getElementsByTagName('form')

//loop through forms
for (i = 0; i < forms.length; i++) {
  //listen to submit event
  forms[i].addEventListener('submit', function(e) {
    //if user just pressed enter, stop the submit event
    if (pressedEnter == true) {
      updateLog('Form prevented from submit.')
      e.preventDefault();
      return false;
    }

    updateLog('Form submitted.')
  })
}

var log = document.getElementById('log')
updateLog = function(msg) {
  log.innerText = msg
}

input,
textarea {
  display: inline-block;
  margin-bottom: 1em;
  border: 1px solid #6f6f6f;
  padding: 5px;
  border-radius: 2px;
  width: 90%;
  font-size: 14px;
}

input[type=submit] {
  background: lightblue;
  color: #fff;
}

<form>
  <p>Sample textarea (try enter key):</p>
  <textarea rows="4">Hit enter, a new line will be added. But the form won't submit</textarea><br/>
  <p>Sample textfield (try enter key):</p>
  <input type="text" placeholder="" />
  <br/>
  <input type="submit" value="Save" />
  <h3 id="log"></h3>
</form>

Bu mükemmel bir yoldur, Sayfanızdan yönlendirilmeyeceksiniz

$('form input').keydown(function (e) {
if (e.keyCode == 13) {
    e.preventDefault();
    return false;
}
});

Ben "ajax metin alanları" (Yii CGridView) ve sadece bir gönderme düğmesi ile bir ızgara vardı benzer bir sorun vardı. Her zaman bir metin alanında arama yaptım ve gönderilen formu girmek için vurdum. Ben görünümler (MVC desen) arasında sadece ortak düğme olduğu için düğmeyle bir şeyler yapmak zorunda kaldı. Tek yapmam gereken kaldırıp type="submit"koymaktıonclick="document.forms[0].submit()

Bence tüm cevaplarla iyi örtülmüş, ancak bazı JavaScript doğrulama koduna sahip bir düğme kullanıyorsanız, formunuzu Enterkey için Enter tuşunu beklediğiniz gibi çağırmak için ayarlayabilirsiniz:

<form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;">

Onkeypress JS, yapmanız gereken her şey olabilir. Daha büyük, küresel bir değişime gerek yoktur. Bu, uygulamayı sıfırdan kodlayan siz değilseniz ve başka birinin web sitesini parçalara ayırmadan ve yeniden test etmeden düzeltmek için getirildiyseniz, özellikle doğrudur.

Burada zaten çok iyi cevaplar var, sadece bir şey UX perspektifinden katkıda bulunmak istiyorum. Formlardaki klavye kontrolleri çok önemlidir.

Soru, tuşa basıldığında gönderimin nasıl devre dışı bırakılacağıdır Enter. EnterTüm uygulamada nasıl yoksayılır . Bu yüzden işleyiciyi pencereye değil bir form öğesine eklemeyi düşünün.

EnterForm gönderimi için devre dışı bırakılması yine de aşağıdakilere izin vermelidir:

1. EnterGönder düğmesi odaklandığında form gönderme .
2. Tüm alanlar doldurulduğunda form gönderme.
3. İle gönder olmayan düğmelerle etkileşim Enter.

Bu sadece kaynatma plakasıdır, ancak her üç koşulu da izler.

$('form').on('keypress', function(e) {
  // Register keypress on buttons.
  $attr = $(e.target).attr('type);
  if ($attr === 'button' || $attr === 'submit') {
    return true;
  }

  // Ignore keypress if all fields are not populated.
  if (e.which === 13 && !fieldsArePopulated(this)) {
    return false;
  }
});

Burada yanıtlanmadığını gördüğüm bir şey var: Sayfadaki öğeler arasında sekme Enteryaptığınızda, gönder düğmesine bastığınızda formdaki gönderen işleyiciyi tetikler, ancak olayı bir MouseEvent olarak kaydeder. İşte bazı üsleri kapsayan kısa çözümüm:

Bu jQuery ile ilgili bir cevap değil

HTML

<form onsubmit="return false;" method=post>
  <input type="text" /><br />
  <input type="button" onclick="this.form.submit()" value="submit via mouse or keyboard" />
  <input type="button" onclick="submitMouseOnly(event)" value="submit via mouse only" />
</form>

JavaScript

window.submitMouseOnly=function(evt){
    let allow=(evt instanceof MouseEvent) && evt.x>0 && evt.y>0 && evt.screenX > 0 && evt.screenY > 0;
    if(allow)(evt.tagName=='FORM'?evt.target:evt.target.form).submit();
}

Çalışan bir örnek bulmak için: https://jsfiddle.net/nemesarial/6rhogva2/

Özel durumumda ENTER'in formu göndermesini durdurmak ve ayrıca gönder düğmesini tıklatmak zorunda kaldım. Bunun nedeni, gönder düğmesinin üzerinde kalıcı bir pencere (devralınmış eski kod) içinde olduğumuz için bir tıklama işleyicisi olmasıydı. Her durumda, bu dava için kombo çözümlerim.

    $('input,select').keypress(function(event) {
        // detect ENTER key
        if (event.keyCode == 13) {
            // simulate submit button click
            $("#btn-submit").click();
            // stop form from submitting via ENTER key press
            event.preventDefault ? event.preventDefault() : event.returnValue = false;
        }
    });

Bu kullanım durumu IE8 ile çalışan kişiler için özellikle yararlıdır.

Bu benim için çalışıyor

jQuery.each($("#your_form_id").find('input'), function(){
    $(this).bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });
});

Küçük bir CoffeeScript kodu eklemek istiyorum (sahada test edilmedi):

$ ->
    $(window).bind 'keypress', (event) ->
        if event.keyCode == 13
            unless {'TEXTAREA', 'SELECT'}[event.originalEvent.srcElement.tagName]
                event.preventDefault()

(Umarım sürece fıkrasındaki güzel numarayı beğenirsiniz.)

Javascript kullanma (herhangi bir giriş alanını kontrol etmeden):

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

Birisi bunu belirli alanlara uygulamak istiyorsa, örneğin girdi türü metni:

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

Benim durumumda bu iyi çalışıyor.

Css'nize gidin ve ekleyin, daha sonra artık istemiyorsanız giriş gönderdiğiniz sürece formülünüzün gönderilmesini otomatik olarak engelleyecek veya silebilir veya yazabilirsiniz activateve deactivatebunun yerine

 input:disabled {
        background: gainsboro;
      }
      input[value]:disabled {
        color: whitesmoke;
      }

javascript:void(0)Form gönderilmesini önlemek için de kullanabilirsiniz .

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>

Bu, diğer çözümlerle ilgili çok fazla hayal kırıklığından sonra tüm tarayıcılarda benim için çalıştı. Name_space dış işlevi, sadece globals bildirmekten uzak durmaktır, ayrıca tavsiye ederim.

$(function() {window.name_space = new name_space();}); //jquery doc ready
function name_space() {
    this.is_ie = (navigator.userAgent.indexOf("MSIE") !== -1);

    this.stifle = function(event) {
        event.cancelBubble;
        event.returnValue = false;
        if(this.is_ie === false) {
            event.preventDefault();
        }
        return false;
    }

    this.on_enter = function(func) {
        function catch_key(e) {
            var enter = 13;
            if(!e) {
                var e = event;
            }
            keynum = GetKeyNum(e);
            if (keynum === enter) {
                if(func !== undefined && func !== null) {
                    func();
                }
                return name_space.stifle(e);
            }
            return true; // submit
        }

        if (window.Event) {
            window.captureEvents(Event.KEYDOWN);
            window.onkeydown = catch_key;
        }
        else {
            document.onkeydown = catch_key;
        }

        if(name_space.is_ie === false) {
            document.onkeypress = catch_key;    
        }
    }
}

Örnek kullanım:

$(function() {
    name_space.on_enter(
        function () {alert('hola!');}
    );
});

kullanın:

// Validate your form using the jQuery onsubmit function... It'll really work...

$(document).ready(function(){
   $(#form).submit(e){
       e.preventDefault();
       if(validation())
          document.form1.submit();
   });
});

function validation()
{
   // Your form checking goes here.
}

<form id='form1' method='POST' action=''>
    // Your form data
</form>