Enter uitschakelen bij form

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Bryan De Baar

Bryan De Baar

30/04/2015 17:26:56
Quote Anchor link
Hallo,

Is het mogelijk om de entertoets uit te zetten / disabled mee te geven, zodat je alleen met een muisklik kan submitten?

Alvast dank.

Gr. Bryan
- Aar -:
Dit topic is verplaatst naar de juiste categorie.
Gewijzigd op 01/05/2015 21:20:39 door - Ariën -
 
PHP hulp

PHP hulp

28/11/2024 03:39:10
 
- Ariën  -
Beheerder

- Ariën -

30/04/2015 17:28:37
Quote Anchor link
Ja, het zou kunnen. Maar ik vraag me af of het de juiste oplossing is voor je probleem?
Ik zie geen reden in waarom je ENTER zou willen blokkeren?

Anyway, als je het graag wilt:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
<script language="JavaScript">
function disableEnter(e)
{
    var keycode;
    if (window.event) keycode = window.event.keyCode;
    if (window.event.keyCode != 13 ) return false;
}
</script>

<body onkeydown="disableEnter(this)">
Lalalalala!
</body>
Gewijzigd op 30/04/2015 17:30:53 door - Ariën -
 
Ozzie PHP

Ozzie PHP

30/04/2015 17:31:06
Quote Anchor link
>> Ik zie geen reden in waarom je ENTER zou willen blokkeren?

Omdat soms een formulier onbedoeld wordt verzonden als je in een tekstvak een tekst typt en op enter drukt om een witregel in te voegen.
 
- Ariën  -
Beheerder

- Ariën -

30/04/2015 17:33:12
Quote Anchor link
Ah, dat is ook weer logisch ;-)
 
Bas IJzelendoorn

Bas IJzelendoorn

30/04/2015 17:43:14
Quote Anchor link
Neem bijvoorbeeld een tekstvak waar je tekst intypt maar waar geen enters zijn toegestaan. Mensen drukken dan op enter en dan is het formulier weg.

Dan is het netter om het te blokkeren en je mailbox/database leeg te houden, dan halve berichten te ontvangen of een informatie balkje erbij te plaatsen.
 
Wouter J

Wouter J

30/04/2015 18:09:54
Quote Anchor link
Merk op dat de code van aar wel een tikkeltje oud is en wellicht voor ongewenst gedrag zorgt (zo zullen nu alle enters op de pagina gebelokkeert worden, niet alleen die van het form).

Iets als dit werkt alleen binnen het form:
Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var form = document.querySelector('form');

// zodat we niet telkens een request ergens anders
// naar maken, irrelevant voor de oplossing

form.addEventListener('submit', function (e) {
  e.preventDefault();

  alert('Submitted form!');
},
false);

// deze variabele bepaald of we momenteel in de
// form bezig zijn of niet

var inFocus = false;

// voeg een functie toe aan het form die wordt uitgevoerd
// wanneer er ergens in het form element geklikt wordt

form.addEventListener('click', function (e) {
  // als het element waarop geklikt wordt een input
  // is dan zijn we dus bezig met het form

  if (e.target && e.target.nodeName === 'INPUT') {
    // input is gefocused
    inFocus = true;
    
    // de blur event wordt uitgevoerd wanneer het inputje
    // zijn focus verliest, wanneer we dus niet meer in
    // het form bezig zijn

    e.target.addEventListener('blur', function (e) {
      // zet inFocus dus weer op false
      inFocus = false;
    });
  }
});


// deze wordt uitgevoerd wanneer we een toets indrukken
// wanneer we de pagina bezoeken

document.body.addEventListener('keydown', function (e) {
  // stel de toetscode is 13 (enter) en we zijn bezig in
  // het form.

  if (e.keyCode === 13 && inFocus) {
    // dan voorkomen we het default gedrag: het submitten
    e.preventDefault();
  }
},
false);


Voorbeeld: http://jsbin.com/huwozexava/1/edit?html,js,output
 
Thomas van den Heuvel

Thomas van den Heuvel

30/04/2015 20:05:09
Quote Anchor link
Quote:
Dan is het netter om het te blokkeren en je mailbox/database leeg te houden, dan halve berichten te ontvangen of een informatie balkje erbij te plaatsen.

Uhm... Hier is validatie voor.

Quote:
Iets als dit werkt alleen binnen het form: ... heel veel code ...

Dat is aardig wat code, en daarmee zet je dit (submit-on-enter) uit voor alle input velden?

Als je van jQuery gebruikt maakt kun je gebruik maken van keypress(). En als je deze koppelt aan een css-class oid, dan kun je zelf bepalen waar dit wel, en waar dit niet moet werken:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
    // No Submit On Enter
    $('.js-nsoe').keypress(function(e) {
        if (e.which == 13) {
            e.preventDefault();
            // en wat je verder nog wilt doen
        }
    });
});
//]]>
</script>

Geen submit als je dit als volgt gebruikt:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<input type="text" name="whatever" class="js-nsoe" />


jQuery: Write Less, Do More.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.