Masquer le curseur clignotant du champ de texte

Question

J'ai un champ de texte. Existe-t-il un moyen de masquer le curseur de texte clignotant ? Je dis cela parce que je fais un site Web d'horreur/mystère et l'un des indices est de commencer à taper n'importe où.

Peut-être que je peux le faire avec javascript ?

Answer 1

Liste des solutions css recommandées pour masquer le caret

---

1. caret-color: transparent; - Dans mon cas, cette approche n'était pas suffisante puisque vous êtes toujours capable de manipuler le champ de saisie afin d'afficher le caret sur ios. Vous pouvez le reproduire sur un ipad en vous concentrant sur une entrée puis en appuyant sur le bouton du clavier qui fait descendre le clavier. Après cela, vous pouvez simplement cliquer à nouveau sur le champ de saisie et soudainement le caret apparaît. J'ai également été en mesure de voir le curseur sur les iphones, mais je ne sais pas exactement comment le reproduire car il semble aléatoire.

---

2. opacity: 0 - Cette approche ne fonctionne pas sur les appareils Android car vous ne pourrez pas vous concentrer sur la saisie. Une autre chose que je n'aime pas, c'est le fait que le site ne défile pas automatiquement vers le haut ou vers le bas jusqu'à l'entrée après la mise au point.

---

3. text-indent: -9999em; - Ce n'est pas vraiment une solution en soi puisque le signe d'insertion sera toujours dans le coin supérieur gauche de l'entrée, du moins sur les appareils ios. Cependant, si vous définissez la largeur de la saisie pour qu'elle dépasse la largeur du site Web, vous ne pourrez pas voir le signe d'insertion.

---

4. visibility: hidden; display: none; - Ces solutions suppriment le signe d'insertion, mais vous ne pourrez pas vous concentrer sur l'entrée, même si vous avez implémenté un événement de clic pour le faire.

---

5. font-size: 0; - Je ne recommande pas cette approche car elle ne fonctionne pas sur les appareils Android et apparemment sur certains ordinateurs Windows. Le navigateur va également zoomer sur l'entrée si la taille de la police est inférieure à 16px. maximum-scale=1 à la balise meta viewport. Vous devrez également afficher la saisie ailleurs que dans le champ de saisie.

---

Ce que j'ai fait

J'ai fini par n'utiliser aucune de ces méthodes car elles ne convenaient pas à mon projet. À la place, j'ai utilisé un éditeur de code léger, comme l'a également recommandé Lajos Mészáros, et j'ai fixé la hauteur de l'entrée à 0. Cela signifie également que vous devrez créer un événement de clic sur un autre élément qui définira le focus de l'entrée. Vous pouvez consulter Type de singe pour référence (je ne suis pas affilié à ce site).

Answer 2

Je viens de faire une preuve de concept pour un de mes amis, en utilisant l'idée de @sinfere :

démo : http://jsfiddle.net/jkrielaars/y64wjuhj/4/

Le début de l'entrée est décalé de sorte qu'il se trouve à l'extérieur du conteneur (dont le débordement est masqué). Les caractères réels (et le curseur clignotant) ne seront jamais visibles. La fausse div est placée sous le champ de saisie, de sorte qu'un tap sur la fausse div mettra le focus sur la saisie invisible.

<div class="container">
    <div id="fake" class="fake">
        <span class='star empty'></span>
        <span class='star empty'></span>
        <span class='star empty'></span>
        <span class='star empty'></span>
    </div>
    <input type="text" id="password" class="invisible" maxlength="4">
</div>