Enter uitschakelen bij form
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 -
Ik zie geen reden in waarom je ENTER zou willen blokkeren?
Anyway, als je het graag wilt:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
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>
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 -
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.
Ah, dat is ook weer logisch ;-)
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.
Iets als dit werkt alleen binnen het form:
Code (js)
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
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);
// 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
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)
1
2
3
4
5
6
7
8
9
10
11
12
13
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>
//<![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:
jQuery: Write Less, Do More.