Désactiver le zoom automatique dans la balise "Texte" d'entrée - Safari sur iPhone
J'ai créé une page HTML comportant une balise <input> avec type="text". Lorsque je clique dessus avec Safari sur iPhone, la page devient plus grande (zoom automatique). Est-ce que quelqu'un sait comment désactiver ceci?
Le navigateur effectuera un zoom si la taille de la police est inférieure à 16px et que la taille de police par défaut des éléments de formulaire est 11px (au moins dans Chrome et Safari).
De plus, l'élément select doit avoir la pseudo-classe focus attachée.
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
font-size: 16px;
}
Il n'est pas nécessaire d'utiliser tout ce qui précède, vous pouvez simplement styliser les éléments dont vous avez besoin, par exemple: just text, number et textarea:
input[type='text'],
input[type='number'],
textarea {
font-size: 16px;
}
Autre solution pour que les éléments d’entrée héritent d’un style parent:
body {
font-size: 16px;
}
input[type="text"] {
font-size: inherit;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
select:focus,
textarea:focus,
input:focus {
font-size: 16px;
background: #eee;
}
}
Nouveau: IOS continuera à zoomer, à moins que vous n'utilisiez 16px sur l'entrée sans mise au point.
@media screen and (-webkit-min-device-pixel-ratio:0) {
select,
textarea,
input {
font-size: 16px;
}
}
J'ai ajouté un arrière-plan puisque IOS n'ajoute aucun arrière-plan à la sélection.
Si votre site Web est correctement conçu pour un appareil mobile, vous pouvez décider de ne pas autoriser la mise à l'échelle.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
Cela résout le problème que votre page ou formulaire mobile va «flotter».
Vous pouvez empêcher Safari d’agrandir automatiquement les champs de texte lors de la saisie de l’utilisateur sans désactivant la possibilité pour l’utilisateur de pincer le zoom. Ajoutez simplement maximum-scale=1, mais laissez de côté l’attribut d’échelle utilisateur suggéré dans les autres réponses.
C'est une option intéressante si vous avez un formulaire dans une couche qui «flotte» si vous effectuez un zoom, ce qui peut entraîner le déplacement d'éléments importants de l'interface utilisateur hors de l'écran.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
En résumé, la réponse est la suivante: définir une taille de police d'au moins 16 pixels pour les éléments de formulaire.
input[type='text'],textarea {font-size:1em;}
Un moyen correct de résoudre ce problème est de changer la méta-vue en
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>Il n'y a pas de moyen propre, mais voici un bidouillage ...
1) J'ai remarqué que l'événement mouseover se produit avant le zoom, mais que le zoom se produit avant les événements mousedown ou focus.
2) Vous pouvez modifier dynamiquement le tag META Viewport en utilisant javascript (voir Activer/désactiver le zoom sur le safari iPhone avec Javascript? )
Donc, essayez ceci (montré dans jQuery pour la compacité):
$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable);
function zoomDisable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="user-scalable=0" />');
}
function zoomEnable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}
C'est certainement un bidouillage ... il peut y avoir des situations où mouseover/down ne capture pas toujours les entrées/sorties, mais cela a bien fonctionné dans mes tests et constitue un bon début.
J'ai récemment (aujourd'hui: D) dû intégrer ce comportement. Afin de ne pas impacter les champs de conception d'origine, y compris les combinaisons, j'ai choisi d'appliquer la transformation au centre du champ:
input[type="text"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
font-size: 16px;
}
Add user-scalable = 0 to metport viewa comme suit
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
Travaillé pour moi :)
Le hack Javascript qui fonctionne sur iOS 7. Ceci est basé sur la réponse de @dlo mais les événements mouseover et mouseout sont remplacés par touchstart et touchend. En gros, ce script ajoute un délai d’une demi-seconde avant que le zoom ne soit réactivé afin d’empêcher le zoom.
$("input[type=text], textarea").on({ 'touchstart' : function() {
zoomDisable();
}});
$("input[type=text], textarea").on({ 'touchend' : function() {
setTimeout(zoomEnable, 500);
}});
function zoomDisable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />');
}
function zoomEnable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1" />');
}
J'ai utilisé la solution de Christina ci-dessus, mais avec une petite modification pour le bootstrap et une autre règle à appliquer aux ordinateurs de bureau. La taille de police par défaut de Bootstrap est 14px, ce qui provoque le zoom. Ce qui suit le change en 16px pour les "contrôles de formulaire" dans Bootstrap, empêchant le zoom.
@media screen and (-webkit-min-device-pixel-ratio:0) {
.form-control {
font-size: 16px;
}
}
Et revenons à 14px pour les navigateurs non mobiles.
@media (min-width: 768px) {
.form-control {
font-size: 14px;
}
}
J'ai essayé d'utiliser .form-control: focus, qui le laissait à 14px sauf sur focus qui le changeait en 16px et qui ne réglait pas le problème de zoom avec iOS8. Au moins sur mon iPhone utilisant iOS8, la taille de la police doit être de 16 px avant la mise au point pour que l'iPhone ne puisse pas zoomer sur la page.
Je l'ai fait aussi avec jQuery:
$('input[type=search]').on('focus', function(){
// replace CSS font-size with 16px to disable auto zoom on iOS
$(this).data('fontSize', $(this).css('font-size')).css('font-size', '16px');
}).on('blur', function(){
// put back the CSS font-size
$(this).css('font-size', $(this).data('fontSize'));
});
Bien entendu, il faudra éventuellement adapter certains autres éléments de l'interface si cette 16px font-size casse la conception.
Cela a fonctionné pour moi:
input, textarea {
font-size: initial;
}
Après un certain temps en essayant je suis venu avec cette solution
// set font-size to 16px to prevent zoom
input.addEventListener("mousedown", function (e) {
e.target.style.fontSize = "16px";
});
// change font-size back to its initial value so the design will not break
input.addEventListener("focus", function (e) {
e.target.style.fontSize = "";
});
Sur "mousedown", la taille de la police utilisée est 16px. Cela empêchera le zoom. Lors de la mise au point, la taille de la police est ramenée à sa valeur initiale.
Contrairement aux solutions publiées précédemment, cela vous permettra de définir la taille de la police de saisie de votre choix.
En passant, si vous utilisez Bootstrap , vous pouvez simplement utiliser cette variante:
.form-control {
font-size: 16px;
}
Après avoir lu presque toutes les lignes ici et testé les différentes solutions, c’est, grâce à tous ceux qui ont partagé leurs solutions, ce que j’ai trouvé, testé et utilisé pour moi sur iPhone 7 iOS 10.x:
@media screen and (-webkit-min-device-pixel-ratio:0) {
input[type="email"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="text"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="password"]:hover,
textarea:hover,
select:hover{font-size: initial;}
}
@media (min-width: 768px) {
input[type="email"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="text"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="password"]:hover,
textarea:hover,
select:hover{font-size: inherit;}
}
Il présente toutefois certains inconvénients, notamment un "saut" résultant du changement rapide de taille de la police entre les états "survol" et "focus" - et l'impact redessiné sur les performances.
Définir une taille de police (pour les champs de saisie) égale à la taille de police du corps, semble être ce qui empêche le navigateur de faire un zoom arrière ou in .. .. Je suggérerais d'utiliser font-size: 1rem comme solution plus élégante.
Les pseudo-éléments tels que :focus ne fonctionnent plus comme avant. Depuis iOS 11, une déclaration de réinitialisation simple peut être ajoutée avant vos styles principaux (à condition de ne pas les remplacer par une taille de police plus petite).
/* Prevent zoom */
select, input, textarea {
font-size: 16px;
}
Il est à noter que pour les bibliothèques CSS telles que Tachyons.css, il est facile de remplacer accidentellement la taille de votre police.
Par exemple, class: f5 équivaut à: fontSize: 1rem, ce qui est correct si vous avez conservé l'échelle de police du corps à la valeur par défaut.
Cependant: si vous choisissez la classe de taille de police: f6, ce sera équivalent à fontSize: .875rem sur un petit écran à la hausse. Dans ce cas, vous devrez être plus précis sur vos déclarations de réinitialisation:
/* Prevent zoom */
select, input, textarea {
font-size: 16px!important;
}
@media screen and (min-width: 30em) {
/* not small */
}
Je vois des gens ici faire des trucs étranges avec JavaScript ou la fonction de fenêtre d'affichage et désactiver tous les zooms manuels sur les appareils ..__ Cela ne devrait pas être une solution à mon avis. L'ajout de cet extrait CSS désactive le zoom automatique dans iOS sans modifier votre taille de police en un nombre fixe tel que 16px.
Par défaut, j'utilise une taille de police de 93,8% (15 pixels) dans les champs de saisie et, en ajoutant mon extrait de code CSS, cette valeur reste à 93,8%. Pas besoin de changer à 16px ou d'en faire un nombre fixe.
input[type="text"]:focus,
textarea:focus {
-webkit-text-size-adjust: 100%;
}
Comme le zoom avant automatique (sans zoom arrière) est toujours valable sur iPhone, voici un JavaScript basé sur la suggestion de dlo de travailler avec le focus/flou.
Le zoom est désactivé dès qu'une entrée de texte est fouillée et réactivé lorsque l'entrée est laissée.
Note: / Certains utilisateurs peuvent ne pas approuver les textes d'édition dans une petite saisie de texte! Par conséquent, je préfère personnellement changer la taille du texte de l'entrée lors de l'édition (voir le code ci-dessous).
<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
if (element.addEventListener) {
element.addEventListener(evtId, handler, false);
} else if (element.attachEvent) {
var ieEvtId = "on"+evtId;
element.attachEvent(ieEvtId, handler);
} else {
var legEvtId = "on"+evtId;
element[legEvtId] = handler;
}
}
function onBeforeZoom(evt) {
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
viewportmeta.content = "user-scalable=0";
}
}
function onAfterZoom(evt) {
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
viewportmeta.content = "width=device-width, user-scalable=1";
}
}
function disableZoom() {
// Search all relevant input elements and attach zoom-events
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++) {
attachEvent(inputs[i], "focus", onBeforeZoom);
attachEvent(inputs[i], "blur", onAfterZoom);
}
}
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
attachEvent(window, "load", disableZoom);
}
// -->
</script>
Le code suivant modifiera la taille du texte d’une entrée à 16 pixels (calculée, c’est-à-dire dans la taille de zoom actuelle) pendant que l’élément a le focus. L'iPhone ne fera donc pas automatiquement un zoom avant.
Remarque: Le facteur de zoom est calculé en fonction de window.innerWidth et de l'affichage de l'iPhone avec une résolution de 320 pixels. Ceci sera seulement valable pour l'iPhone en mode portrait.
<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
if (element.addEventListener) {
element.addEventListener(evtId, handler, false);
} else if (element.attachEvent) {
var ieEvtId = "on"+evtId;
element.attachEvent(ieEvtId, handler);
} else {
var legEvtId = "on"+evtId;
element[legEvtId] = handler;
}
}
function getSender(evt, local) {
if (!evt) {
evt = window.event;
}
var sender;
if (evt.srcElement) {
sender = evt.srcElement;
} else {
sender = local;
}
return sender;
}
function onBeforeZoom(evt) {
var zoom = 320 / window.innerWidth;
var element = getSender(evt);
element.style.fontSize = Math.ceil(16 / zoom) + "px";
}
function onAfterZoom(evt) {
var element = getSender(evt);
element.style.fontSize = "";
}
function disableZoom() {
// Search all relevant input elements and attach zoom-events
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++) {
attachEvent(inputs[i], "focus", onBeforeZoom);
attachEvent(inputs[i], "blur", onAfterZoom);
}
}
if (navigator.userAgent.match(/iPhone/i)) {
attachEvent(window, "load", disableZoom);
}
// -->
</script>
Au lieu de simplement définir la taille de la police sur 16px, vous pouvez:
- Attribuez un style au champ de saisie de manière à ce qu'il soit supérieur à la taille souhaitée, ce qui permet de définir la taille de la police logique sur 16 px.
- Utilisez la transformation CSS -
scale()et les marges négatives pour réduire la taille du champ de saisie.
Par exemple, supposons que votre champ de saisie porte à l'origine le style suivant:
input[type="text"] {
border-radius: 5px;
font-size: 12px;
line-height: 20px;
padding: 5px;
width: 100%;
}
Si vous agrandissez le champ en augmentant toutes les dimensions de 16/12 = 133,33%, réduisez ensuite avec scale() de 12/16 = 75%, le champ de saisie aura la taille visuelle correcte (et la taille de la police), et aucun zoom sur le point.
Comme scale() n'affecte que la taille visuelle, vous devrez également ajouter des marges négatives pour réduire la taille logique du champ.
Avec ce CSS:
input[type="text"] {
/* enlarge by 16/12 = 133.33% */
border-radius: 6.666666667px;
font-size: 16px;
line-height: 26.666666667px;
padding: 6.666666667px;
width: 133.333333333%;
/* scale down by 12/16 = 75% */
transform: scale(0.75);
transform-Origin: left top;
/* remove extra white space */
margin-bottom: -10px;
margin-right: -33.333333333%;
}
le champ de saisie aura une taille de police logique de 16 pixels tout en ayant un texte de 12 pixels.
J'ai un article de blog où je vais un peu plus en détail, et j'ai cet exemple comme HTML visible:
Aucun zoom d’entrée dans Safari sur iPhone, la solution parfaite en pixels
Un commentaire pour la réponse principale sur la définition de font-size à 16px a demandé comment il s’agissait d’une solution, et si vous vouliez des polices plus grandes/plus petites.
Je ne sais pas vous tous, mais utiliser px pour les tailles de police n'est pas la meilleure solution, vous devriez utiliser em.
J'ai rencontré ce problème sur mon site responsive où mon champ de texte est supérieur à 16 pixels. J'avais mon conteneur de formulaire défini sur 2rem et mon champ d'entrée défini sur 1.4em. Dans mes requêtes mobiles, je change la taille de la police html en fonction de la fenêtre d'affichage. Puisque le code HTML par défaut est 10, mon champ de saisie calcule à 28 px sur le bureau.
Pour supprimer le zoom automatique, je devais changer mon entrée en 1.6em. Cela a augmenté ma taille de police à 32px. Juste un peu plus haut et à peine perceptible. Sur mon iPhone 4 et 5, je modifie ma taille de police html en 15 pixels pour un portrait et de nouveau en 10 pixels pour un paysage. Il est apparu que la limite idéale pour cette taille de pixel était de 48px, c’est pourquoi j’ai changé de 1,4em (42px) à 1,6em (48px).
Ce que vous devez faire est de trouver le bon compromis sur la taille de la police, puis de la convertir à l’arrière en taille réelle.
Voici un hack que j'ai utilisé sur l'un de mes projets:
select {
font-size: 2.6rem; // 1rem = 10px
...
transform-Origin: ... ...;
transform: scale(0.5) ...;
}
Je me suis retrouvé avec les styles et l'échelle initiaux que je voulais mais pas de zoom sur la mise au point.
Basé sur la réponse de Stephen Walsh ... Ce code fonctionne sans changer la taille de la police des entrées mises au point (ce qui semble nul), plus il fonctionne toujours avec FastClick , que je suggère d'ajouter à tous les sites mobiles aider à apporter le "vif". Ajustez votre "largeur de fenêtre" en fonction de vos besoins.
// disable autozoom when input is focused
var $viewportMeta = $('head > meta[name="viewport"]');
$('input, select, textarea').bind('touchend', function(event) {
$viewportMeta.attr('content', 'width=640, user-scalable=0');
setTimeout(function(){ $viewportMeta.attr('content', 'width=640, user-scalable=1'); }, 1)
});
J'ai dû "corriger" le problème de contrôle de zoom automatique pour un site Web d'une université néerlandaise (qui utilisait 15 pixels de contrôle de formulaire). Je suis venu avec l'ensemble des exigences suivantes:
- l'utilisateur doit toujours pouvoir zoomer
- la taille de la police doit rester la même
- pas de clignotement de style différent temporaire
- pas d'exigence jQuery
- doit fonctionner sur le dernier iOS et ne pas entraver les autres combinaisons système d'exploitation/périphérique
- si possible pas de timeout magique, et si nécessaire effacer correctement les minuteries
C'est ce que je suis arrivé jusqu'à présent:
/*
NOTE: This code overrides the viewport settings, an improvement would be
to take the original value and only add or change the user-scalable value
*/
// optionally only activate for iOS (done because I havn't tested the effect under other OS/devices combinations such as Android)
var iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
if (iOS)
preventZoomOnFocus();
function preventZoomOnFocus()
{
document.documentElement.addEventListener("touchstart", onTouchStart);
document.documentElement.addEventListener("focusin", onFocusIn);
}
let dont_disable_for = ["checkbox", "radio", "file", "button", "image", "submit", "reset", "hidden"];
//let disable_for = ["text", "search", "password", "email", "tel", "url", "number", "date", "datetime-local", "month", "year", "color"];
function onTouchStart(evt)
{
let tn = evt.target.tagName;
// No need to do anything if the initial target isn't a known element
// which will cause a zoom upon receiving focus
if ( tn != "SELECT"
&& tn != "TEXTAREA"
&& (tn != "INPUT" || dont_disable_for.indexOf(evt.target.getAttribute("type")) > -1)
)
return;
// disable zoom
setViewport("width=device-width, initial-scale=1.0, user-scalable=0");
}
// NOTE: for now assuming this focusIn is caused by user interaction
function onFocusIn(evt)
{
// reenable zoom
setViewport("width=device-width, initial-scale=1.0, user-scalable=1");
}
// add or update the <meta name="viewport"> element
function setViewport(newvalue)
{
let vpnode = document.documentElement.querySelector('head meta[name="viewport"]');
if (vpnode)
vpnode.setAttribute("content",newvalue);
else
{
vpnode = document.createElement("meta");
vpnode.setAttribute("name", "viewport");
vpnode.setAttribute("content", newvalue);
}
}
Quelques notes:
- Notez que jusqu'à présent je ne l'ai testé que sur iOS 11.3.1, mais le testera bientôt sur quelques autres versions.
- L'utilisation de focusIn signifie qu'il nécessite au moins iOS 5.1 (mais je vois de toute façon les sites que nous construisons fonctionnant dans les versions iOS antérieures à 9 ans).
- Utilisation de la délégation d'événement car beaucoup de sites sur lesquels je travaille ont des pages susceptibles de créer dynamiquement des contrôles de formulaire
- Définition des eventListeners sur l'élément html (documentElement) afin de ne pas avoir à attendre que le corps devienne disponible (ne pas vouloir vérifier si le document est prêt/chargé ou s'il faut attendre l'événement DOMContentLoaded)
Comme de nombreuses autres réponses l'ont déjà indiqué, il est possible d'y parvenir en ajoutant maximum-scale à la balise meta viewport. Cependant, cela a pour conséquence négative de désactiver le zoom de l'utilisateur sur les appareils Android . ( Il ne désactive pas le zoom utilisateur sur les appareils iOS depuis la v1 .)
Nous pouvons utiliser JavaScript pour ajouter dynamiquement maximum-scale à la méta viewport lorsque l'appareil est iOS. Cela permet d'obtenir le meilleur des deux mondes: nous permettons à l'utilisateur de zoomer et d'empêcher iOS de zoomer dans les champs de texte sélectionnés.
| maximum-scale | iOS: can zoom | iOS: no text field zoom | Android: can zoom |
| ------------------------- | ------------- | ----------------------- | ----------------- |
| yes | yes | yes | no |
| no | yes | no | yes |
| yes on iOS, no on Android | yes | yes | yes |
Code:
const addMaximumScaleToMetaViewport = () => {
const el = document.querySelector('meta[name=viewport]');
if (el !== null) {
const content = el.getAttribute('content');
const newContent = [content, 'maximum-scale=1.0'].join(', ');
el.setAttribute('content', newContent);
}
};
const disableIosTextFieldZoom = addMaximumScaleToMetaViewport;
// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios/9039885#9039885
const checkIsIOS = () =>
/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (checkIsIOS()) {
disableIosTextFieldZoom();
}
Dans Angular, vous pouvez utiliser des directives pour empêcher le zoom sur la focalisation sur les périphériques IOS. Aucune balise meta pour préserver l'accessibilité.
import { Directive, ElementRef, HostListener } from '@angular/core';
const MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX = 16;
@Directive({ selector: '[noZoomiOS]' })
export class NoZoomiOSDirective {
constructor(private el: ElementRef) {}
@HostListener('focus')
onFocus() {
this.setFontSize('');
}
@HostListener('mousedown')
onMouseDown() {
this.setFontSize(`${MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX}px`);
}
private setFontSize(size: string) {
const { fontSize: currentInputFontSize } = window.getComputedStyle(this.el.nativeElement, null);
if (MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX <= +currentInputFontSize.match(/\d+/)) {
return;
}
const iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
iOS
&& (this.el.nativeElement.style.fontSize = size);
}
}
Vous pouvez l'utiliser comme ceci <input noZoomiOS > après l'avoir déclaré dans votre *.module.ts
J'ai mis du temps à le trouver mais voici le meilleur code que j'ai trouvé ...... http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/
var $viewportMeta = $('meta[name="viewport"]');
$('input, select, textarea').bind('focus blur', function(event) {
$viewportMeta.attr('content', 'width=device-width,initial-scale=1,maximum-scale=' + (event.type == 'blur' ? 10 : 1));
});
Je veux jeter mon 0,02 $ parce que même avec cette réponse, il m'a fallu trois jours pour comprendre que wtf se passait et que je pourrais avoir besoin de la solution à l'avenir.
Ma situation était légèrement différente de celle décrite.
Dans le mien, j'avais un texte contenteditable dans une div sur la page. Lorsque l'utilisateur cliquait sur un div différent, un bouton de tri, je sélectionnais automatiquement du texte dans le div contenteditable (une plage de sélection précédemment enregistrée et effacée), exécutais une commande execComm en texte enrichi sur cette sélection, puis l'effaçait à nouveau.
Cela m'a permis de modifier de manière invisible les couleurs du texte en fonction des interactions de l'utilisateur avec les diviseurs de couleur ailleurs sur la page, tout en maintenant la sélection masquée pour que les couleurs puissent être visualisées dans le bon contexte.
Eh bien, sur l'iPad Safari, cliquer sur la couleur divisionnait le clavier à l'écran et rien de ce que je ferais ne l'empêcherait.
J'ai enfin compris comment l'iPad fait cela.
Il écoute une séquence touchstart et touchend qui déclenche une sélection de texte modifiable.
Lorsque cette combinaison se produit, le clavier à l'écran apparaît.
La solution que j’avais utilisée consistait donc à intercepter touchstart et touchend sur ces couleurs particulières. Dans les deux gestionnaires, j'arrête la propagation et le bouillonnement et retourne false. Mais dans l'événement touchend, je déclenche le même comportement que celui provoqué par un clic.
Ainsi, auparavant, Safari a déclenché ce que je pense était "touchstart", "mousedown", "touchend", "mouseup", "click", et à cause de mon code, une sélection de texte, dans cet ordre.
La nouvelle séquence à cause des interceptions est simplement la sélection de texte. Tout le reste est intercepté avant que Safari ne puisse le traiter et utiliser son clavier. Les interceptions touchstart et touchend empêchent le déclenchement d'événements de la souris, ce qui est parfaitement correct dans le contexte.
Je ne connais pas de moyen plus facile de décrire cela, mais j'estime qu'il est important de l'avoir ici, car j'ai trouvé ce fil moins d'une heure après avoir rencontré le problème pour la première fois.
Je suis sûr à 98% que le même correctif fonctionnera avec les zones de saisie et tout le reste. Interceptez les événements tactiles et traitez-les séparément sans les laisser se propager ou en bulles, et envisagez de faire les sélections après un délai très court pour vous assurer que Safari ne reconnaît pas la séquence en tant que déclencheur au clavier.
S'il vous plaît ne pas utiliser Javascript ou hacks pour le faire fonctionner. Cela affectera le score de votre projet sur le web.
Ça fera l'affaire:
input, input:active, input:focus, input:focus-within, input:hover, input:visited {
font-size: 16px!important;
}