11521 sujets

JavaScript, DOM et API Web HTML5

Désactivé Onclick en version mobile

Bonjour tout le monde, je suis nouveau ici. Alors je vous explique mon problème c'est a dire que j'ai un formulaire d'inscription. quand je clique sur s'inscrire un popup s'affiche. J'ai créer le même formulaire d'inscription sauf que celui la en version mobile quand je vais cliquer sur m'inscrire il n'y aura pas de popup. Sauf que en version ordinateur je veux juste que le formulaire d'inscription en popup s'affiche et en version mobile pas de popup. pour le désactiver j'ai trouvere cela onclick="return false"; dans <a href="" onclick="return false"; le onclick je veux le désactiver en étant en version mobile. Ou si il une autre façon de le faire je suis preneur Smiley smile

Menu:
<ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block">
                                        <li><a href="index.php" class="nav-link">Accueil</a></li>
                                        <li><a href="#" class="nav-link">A propos</a></li>
                                        <li><a href="contact/contact.php" class="nav-link contact">Contactez-nous</a><span id="bar">|</span></li>
                                        <li class="sign-up btnPopup" id="btnPopup"><a href="register.php" onclick="return false;" class="nav-link" id="registre"><i class="fas fa-sign-in-alt" style="margin-right: 5px;"></i>Inscription / Connexion</a></li>
                                    </ul>


Script pour popup:
<script>
            var btnPopup = document.getElementById('btnPopup');
            var overlay = document.getElementById('overlay-popup');
            var btnClose = document.getElementById('btnClose');
            btnPopup.addEventListener('click',openMoadl);
            btnClose.addEventListener('click',closeModal);
            function openMoadl() {
                overlay.style.display='block';
            }
            function closeModal() {
                overlay.style.display='none';
            }
            // When the user clicks anywhere outside of the modal, close it
            window.onclick = function(event) {
                if (event.target == overlay) {
                    overlay.style.display = "none";
                }
            }
        </script>


Et le formulaire qui s'ouvre en popup:
<!-- DEFINIR CSS POP REGISTRE --->
        <div id="overlay-popup" class="overlay-popup">
            <div id="popup" class="popup">
                <div class="container separator">
                    <div class="heading-content text-center">
                        <div class="heading">
                            <span id="btnClose" class="btnClose">&times;</span>
                            <h4 class="title">INSCRIPTION SUR blabla<span style="color: #007eb3; text-transform:none;">.COM</span></h4>
                        </div>
                    </div>
                    <div id="inscription_success" class="alert alert-success" style="display: none;">Un e-mail d'activation du compte vous a été envoyer, verifier votre boîte mail.</div>
                    <div class="row">
                        <div class="col-md-12 col-md-offset-2 col-sm-12 col-xs-12">
                            <form method="post" action="" id="contact">
                                <div class="row">
                                    <div class="col-md-12 col-sm-12 col-xs-12">
                                        <div class="form-group validate-input">
                                            <label for="email">Votre adresse mail</label>
                                            <input type="email" class="form-control input-label" id="email" name="email"   placeholder="Votre Email" required>
                                        </div>
                                    </div>

                                    <div class="col-md-12 col-sm-12 col-xs-12">
                                        <div class="form-group validate-input">
                                            <label for="pseudo" style="width:100%;">Votre Pseudo<span class="mdp" style="margin-left:2px;"> Le pseudo peut contenir que des lettres et chiffres</span></label>
                                            <input type="text" class="form-control input-label" id="pseudo" name="pseudo" placeholder="Votre Pseudo" minlength="4" maxlength="15" required>
                                        </div>
                                    </div>

                                    <div class="col-md-6 col-sm-12 col-xs-12">
                                        <div class="form-group ">
                                            <label for="password">Votre mot de passe</label>
                                            <input type="password" class="form-control input-label" id="password" name="password" placeholder="Votre mot de passe" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-12 col-xs-12">
                                        <div class="form-group ">
                                            <label for="confirme_password">Confirmer votre mot de passe</label>
                                            <input type="password" class="form-control input-label" id="confirme_password" name="confirme_password" placeholder="Confirmer votre mot de passe" required>
                                        </div>
                                    </div>
                                    <div class="btn-submit col-md-12 col-sm-12 col-xs-12">    
                                        <button type="submit" class="btn-default btn abt-btn" name="envoi">S'inscrire<i class="fas fa-sign-in-alt sign" style="margin-left: 5px;"></i>
                                            <i class="fa fa-circle-o-notch fa-spin loading hide" style="margin-left: 5px;"></i>
                                        </button>
                                        <a href="connexion.php" class="connect submit" style="text-decoration: none;">Un compte ? Connectez-vous</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>   
                </div>
            </div>
        </div>

Modifié par Alpha_dev (12 May 2020 - 07:09)
Bonjour,

Je pense que le simple simple serait de trouver un script qui détecte sur quel device vous êtes. En fonction de cela, dans la méthode vous aurez une simple condition à faire

Bien à vous
Salut tu peux surement utiliser la méthode "matchmedia" qui te permet d'appliquer selon les dimension de l'écran.

if (window.matchMedia("(min-width: 600px)").matches) {/*  ta condition*/ }
  /* La largeur minimum de l'affichage est 600 px inclus */
La largeur d'écran ne fait pas le device. Si on veut savoir si on est sur un périphérique tactile, il faudra quelque chose de plus puissant
Gus a écrit :
La largeur d'écran ne fait pas le device. Si on veut savoir si on est sur un périphérique tactile, il faudra quelque chose de plus puissant

J'ai posé cette question il y a longtemps, la réponse (de l'époque) était
1) que ça ne servait à rien (???)
2) que ça n'existait pas
Je pense que la réponse 1 était idiote, mais que la réponse 2 était --hélas-- la vérité.
Si cela a changé je suis preneur...
PapyJP a écrit :

J'ai posé cette question il y a longtemps, la réponse (de l'époque) était
1) que ça ne servait à rien (???)
2) que ça n'existait pas
Je pense que la réponse 1 était idiote, mais que la réponse 2 était --hélas-- la vérité.
Si cela a changé je suis preneur...


Je suis d'accord avec vous, la réponse 1 est totalement idiote.
Par contre j'ai déjà été confronté ce problème et j'ai en effet pu trouver la solution.
il exsite des scripts qui détectent sur quel type de périphérique et qui arrivent à détecter précisément les informations du device. J'utilisais ce script https://zeno.github.io/mobile-detect-demo/
Après il est évident qu'il faut utiliser ce genre de chose avec parcimonie
Hmm!
J'ai regardé ce dossier, ça semble nous entraîner dans des complexités auxquelle je préfère ne pas me confronter.
Noter par ailleurs qu'il existe maintenant des PC avec écran tactile ET souris.

Ce que je fais dans les sites que je gère, c'est mettre en tête du fichier "common.js" qui est appelé dans toutes les pages les scripts suivants:

var mouseX, mouseY, withMouse;
(function() {
	withMouse = sessionStorage.getItem('withMouse');
	if(withMouse) document.getElementsByTagName('html')[0].setAttribute('data-withMouse', '1');
})();
document.addEventListener('mousemove', function(event) {
	if(!withMouse) {
		withMouse = true;
		document.getElementsByTagName('html')[0].setAttribute('data-withMouse', '1');
		sessionStorage.setItem('withMouse', true);
	}
	mouseX = event.clientX;
	mouseY = event.clientY;
});


A savoir:
1) au premier mouvement de souris je force un attribut "data-withMouse" dans la balise <html>, ce qui permet de tester en JavaScript et en css dans quel cas on est
2) pour plus de précaution je note cette valeur dans sessionStorage, ce qui permet dans les autres pages de positionner cet attribut avant même que l'utilisateur ait fait un mouvement de souris

Pas génial, mais faute de mieux... Smiley cligne
Modifié par PapyJP (12 May 2020 - 16:15)
L’agent utilisateur te dit ce que le navigateur veut bien te dire.
J’utilise l’agent utilisateur avec parcimonie.

Ici la question est de savoir si le terminal est tactile ou non.
Mon programme ne te dit pas s’il est tactile, il te dit si l’utilisateur a fait marcher une souris (ou un touchpad).
La raison pour laquelle j’utilise cette information c’est pour espacer davantage les boutons et autres liens, il doit pouvoir servir à autre chose est à voir.
Merci à vous j'ai essayer la méthod matchMedia comme cela:
if (window.matchMedia("(min-width: 600px)").matches) {
window.location.href = document.getElementById('registre').href
}


pour rediriger vers un autre liens mais ce ne fonctionne pas ?
Tester si "ontouchstart' existe vous dit si le NAVIGATEUR supporte cet évènement, pas si le TERMINAL le supporte.
Sujet clos
Aller à