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

L'idée de base est que la couleur du curseur est la même que celle du texte. La première chose à faire est donc de rendre le texte transparent, ce qui fait disparaître le curseur avec lui. Ensuite, vous pouvez rendre le texte à nouveau visible grâce à une ombre de texte.

Utilisez ce lien pour le voir en direct dans jsfiddle .

input[type="text"]{
    color : transparent;
    text-shadow : 0 0 0 #000;
}
input[type="text"]:focus{
    outline : none;
}

Mise à jour :

Connu pour ne pas fonctionner dans iOS 8 y IE 11

---

Une autre de mes idées est un peu plus compliquée et nécessite du javascript.

Partie HTML et CSS :

Vous créez 2 champs de saisie et vous en positionnez un exactement au-dessus de l'autre avec z-index, etc. Ensuite, vous rendez le champ de saisie supérieur complètement transparent, sans focus, sans couleur, etc. Vous devez définir l'entrée inférieure visible comme désactivée, de sorte qu'elle affiche uniquement le contenu de l'entrée supérieure, mais ne fonctionne pas réellement.

Partie Javascript :

Après tout ce qui précède, vous synchronisez les deux entrées. Lorsque vous appuyez sur une touche ou lorsque vous changez, vous copiez le contenu de l'entrée supérieure vers l'entrée inférieure.

En résumé, vous tapez dans un champ de saisie invisible, et celui-ci sera envoyé au backend lorsque le formulaire sera soumis, mais chaque mise à jour du texte qu'il contient sera répercutée dans le champ de saisie inférieur visible, mais désactivé.

Answer 2

caret-color: transparent !important; fonctionne dans les navigateurs plus récents

Answer 3

Je cherchais un moyen de masquer le curseur clignotant sur les appareils iOS pour les entrées de date qui déclenchent un calendrier, car on pouvait voir le curseur clignoter au-dessus du sélecteur de calendrier.

input:focus { text-indent: -9999em; }

Dans ce cas, mon CSS fonctionne bien, mais l'inconvénient est que si vous avez besoin de voir ce que vous tapez, ce n'est pas une bonne solution.

Answer 4

Essayez ça :

$(document).ready(
  function() {
    $("textarea").addClass("-real-textarea");
    $(".textarea-wrapper").append("<textarea class=\"hidden\"></textarea>");
    $(".textarea-wrapper textarea.hidden").keyup(
      function() {
        $(".textarea-wrapper textarea.-real-textarea").val($(this).val());
      }
    );
    $(".textarea-wrapper textarea.-real-textarea").focus(
      function() {
        $(this).parent().find("textarea.hidden").focus();
      }
    );
  }
);

.textarea-wrapper {
  position: relative;
}

.textarea-wrapper textarea {
  background-color: white;
}

.textarea-wrapper,
.textarea-wrapper textarea {
  width: 500px;
  height: 500px;
}

.textarea-wrapper textarea.hidden {
  color: white;
  opacity: 0.00;
  filter: alpha(opacity=00);
  position: absolute;
  top: 0px;
  left: 0px;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div class="textarea-wrapper">
  <textarea></textarea>
</div>

L'idée est de créer une seconde, invisible <textarea> par-dessus/au-dessus de la vraie. L'utilisateur tape dans le champ invisible mais le texte n'apparaît pas (ni le curseur) car il est invisible ! Vous utilisez alors JavaScript pour attribuer sa valeur au champ visible.

Mais cela ne semble pas fonctionner dans IE8 :'( le signe d'insertion est toujours visible même si l'opacité est portée à 11.

Mais cela fonctionne dans Firefox... ?

Answer 5

Je pense que c'est une solution parfaite : rendre l'entrée suffisamment large, l'aligner sur la droite de l'écran, de sorte que le curseur et le contenu se situent à l'extérieur de l'écran, tout en restant cliquables.