Javascript de masquer le formulaire html par la détection du navigateur

Ma question est de savoir comment cacher certains éléments html en fonction de ce que les utilisateurs du navigateur utilisent. Pour la partie détection du navigateur, j'ai terminé. Ces trucs isChrome renvoient "true" ou "false" à utiliser dans la condition if ultérieure. De quel code ai-je manqué pour connecter la section js if/else à css pour masquer le champ de login.Ou est-ce que tu as un autre moyen de le faire?Javascript de masquer le formulaire html par la détection du navigateur

\t \t // Firefox 1.0+ 
 
    var isFirefox = typeof InstallTrigger !== 'undefined'; 
 
    
 
    // Chrome 1+ 
 
    var isChrome = !!window.chrome && !!window.chrome.webstore; 
 
    
 
    // Edge 20+ 
 
    var isEdge = !isIE && !!window.StyleMedia; 
 
    
 
    // Internet Explorer 6-11 
 
    var isIE = /*@[email protected]*/false || !!document.documentMode; 
 
    
 
     
 
var output = 'Detecting browsers:<hr>'; 
 
output += 'isFirefox: ' + isFirefox + '<br>'; 
 
output += 'isChrome: ' + isChrome + '<br>'; 
 
output += 'isEdge: ' + isEdge + '<br><br>'; 
 

 
document.getElementById("browser").innerHTML = output; 
 

 
//if (isChrome==true){ 
 
// \t $(".LoginField").css("visibility","hidden"); 
 
//}

.visible { 
 
    visibility: visible; 
 
} 
 

 
.not-visible { 
 
    visibility: hidden; 
 
} 
 

 
.LoginField{ 
 
    visibility: visible; 
 
}

<p class="visible">The first paragraph is visible.</p> 
 
<p class="not-visible">The second paragraph is NOT visible.</p> 
 

 
<div id="browser"></div> 
 
<div class="LoginField">login fields</div>

Source

2017-09-06 KenyKeny

Qu'est-ce que vous êtes probablement manquant est le $ (document) .ready (fonction () {}) dans lequel vous devez placer votre instruction if. –

@LeoFarmer Pourquoi? En ajoutant '$ (document) .ready (function() {})', cette fonction trace-t-elle l'ID et classe-t-elle globalement? – KenyKeny

Votre code fonctionne exactement comme prévu, à condition que vous avez pensé à inclure jQuery sur la page. Cela dit, vous pouvez simplement vérifier if (isChrome) - vous n'avez pas besoin de vérifier qu'il est égal à true. Vous n'avez pas non plus besoin de CSS pour indiquer que .LoginField est visible par défaut.

Voici un exemple de travail, où les informations de connexion sont visibles sur tous les navigateurs, mais Chrome:

// Firefox 1.0+ 
 
var isFirefox = typeof InstallTrigger !== 'undefined'; 
 

 
// Chrome 1+ 
 
var isChrome = !!window.chrome && !!window.chrome.webstore; 
 

 
// Edge 20+ 
 
var isEdge = !isIE && !!window.StyleMedia; 
 

 
// Internet Explorer 6-11 
 
var isIE = /*@[email protected]*/ false || !!document.documentMode; 
 

 

 
var output = 'Detecting browsers:<hr>'; 
 
output += 'isFirefox: ' + isFirefox + '<br>'; 
 
output += 'isChrome: ' + isChrome + '<br>'; 
 
output += 'isEdge: ' + isEdge + '<br><br>'; 
 

 
document.getElementById("browser").innerHTML = output; 
 

 
if (isChrome) { 
 
    $(".LoginField").css("visibility", "hidden"); 
 
}

.visible { 
 
    visibility: visible; 
 
} 
 

 
.not-visible { 
 
    visibility: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p class="visible">The first paragraph is visible.</p> 
 
<p class="not-visible">The second paragraph is NOT visible.</p> 
 

 
<div id="browser"></div> 
 
<div class="LoginField">login fields</div>

Source

2017-09-06 03:58:22

Javascript de masquer le formulaire html par la détection du navigateur

Répondre

Questions connexes