11521 sujets

JavaScript, DOM et API Web HTML5

Script compatible sur mobile

Bonjour,

J'ai créé une fonction js qui vérifie lors de la saisie dans un champ (input) si les caractères correspondent bien. Ma fonction marche mais sur mobile ça ne marche pas. Je ne connais l'astuce avec l'événement onkeyup sur mobile. J'ai besoin de votre aide. Merci par avance !


<!-- HTML -->
<input type="text" name="np" value="" maxlength="25" onkeyup="verif_text(this);">



function verif_text(champ){
    var chiffres = new RegExp("[a-zA-Z ?.-=+,]");
    var verif;
    var points = 0;

    for(x = 0; x < champ.value.length; x++){
       verif = chiffres.test(champ.value.charAt(x));
       if(champ.value.charAt(x) == "."){points++;}
       if(points > 1){verif = false; points = 1;}
       if(verif == false){champ.value = champ.value.substr(0,x) + champ.value.substr(x+1,champ.value.length-x+1); x--;}
     }
}
Bonsoir, essayez un évènement oninput au lieu de onkeyup. La fonction verif_text sera appelée à chaque changement de valeur de l'élément input.
Ce n'est pas très connu alors que c'est pourtant largement supporté : caniuse.
Bonjour @TrisTOON,

Merci pour ta réponse.
Mais l'évènement oninput ne fonctionne pas sur mobile.

Cdlt,
Bonjour,
Dans ce cas, je crois qu'il n'y a pas de solution pratique à ce problème.
Je vous propose tout de même une idée un peu sauvage :
<input type="text" id="np" name="np" value="" maxlength="25">


function verif_text(champ){
    var chiffres = new RegExp("[a-zA-Z ?.-=+,]");
    var verif;
    var points = 0;

    for(x = 0; x < champ.value.length; x++){
       verif = chiffres.test(champ.value.charAt(x));
       if(champ.value.charAt(x) == "."){points++;}
       if(points > 1){verif = false; points = 1;}
       if(verif == false){champ.value = champ.value.substr(0,x) + champ.value.substr(x+1,champ.value.length-x+1); x--;}
     }
};
function verif_regulier_text(champ) {
    if(champ == document.activeElement) {
        verif_text(champ);
        requestAnimationFrame(() => verif_regulier_text(champ));
    };
};
var np = document.getElementById("np");
np.addEventListener("focus", function() {
    verif_regulier_text(this);
}, true);
np.addEventListener("change",  function() { // ou "blur"
    verif_text(this);
}, false);

La validité de votre champ sera vérifiée en permanence dès lors qu'il a le focus et pas seulement lors de la saisie d'une lettre. Je n'ai pas testé, mais il y a un risque que ça empêche l'utilisateur de saisir du texte sans gène. Il faut tout de même garder un écouteur "change" ou "blur" pour vérifier le champ lorsque l'utilisateur le quitte.
Si vous n'avez qu'un seul champ sur votre page, cette méthode un peu bourrin peut convenir, mais de manière générale, je ne vous la recommande pas.
De plus, il me semble que document.activeElement est géré différemment selon les navigateurs (je ne sais pas si c'est toujours d'actualité).
Modifié par TrisTOON (25 Mar 2017 - 13:00)
L'évènement input fonctionne apparement sans problème sur mobile.

J'ai fais un test rapide ici.
Modifié par mob (26 Mar 2017 - 18:01)
Sujet clos
Aller à