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
2.779 views
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:
Ik zie geen reden in waarom je ENTER zou willen blokkeren?
Anyway, als je het graag wilt:
<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>
>> 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.
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 ;-)
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.
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.
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 lang=js]
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);[/code]
Voorbeeld: http://jsbin.com/huwozexava/1/edit?html,js,output
Iets als dit werkt alleen binnen het form:
[code lang=js]
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);[/code]
Voorbeeld: http://jsbin.com/huwozexava/1/edit?html,js,output
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.
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:
<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:
<input type="text" name="whatever" class="js-nsoe" />jQuery: Write Less, Do More.