web-dev-qa-db-fra.com

Masquer le curseur clignotant du champ de texte

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?

htmltextfield
53
test

Essaye ç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 un deuxième <textarea> Invisible, par-dessus/par-dessus le vrai. L'utilisateur tape l'invisible mais le texte n'apparaît pas (ni le curseur/curseur) car il est invisible! Vous utilisez ensuite JavaScript pour affecter sa valeur à celle visible.

Mais cela ne semble pas fonctionner dans IE8: '(le curseur est toujours visible même si l'opacité est augmentée jusqu'à 11.

Mais ça marche dans Firefox ...?

19
Richard JP Le Guen

L'idée de base est que la couleur du curseur est la même que la couleur du texte. Donc, la première chose que vous faites est de rendre le texte transparent, emportant ainsi le curseur avec lui. Ensuite, vous pouvez rendre le texte visible à nouveau avec 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 et IE 11

Une autre idée de mon est un peu plus hacky et nécessite javascript.

Partie HTML et CSS:

Vous créez 2 champs de saisie et vous positionnez exactement l'un 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 sur désactivé, afin qu'elle affiche uniquement le contenu de l'entrée ci-dessus, mais ne fonctionne pas réellement.

Partie Javascript:

Après tout ce qui précède, vous synchronisez les deux entrées. Lors d'une pression sur une touche ou lors d'un changement, vous copiez le contenu de l'entrée supérieure vers la inférieure.

Pour résumer tout ce qui précède: vous saisissez une entrée invisible, et celle-ci sera envoyée au backend lorsque le formulaire sera soumis, mais chaque mise à jour du texte y sera répercutée dans le champ de saisie inférieur visible, mais désactivé.

58
Lajos Meszaros

caret-color: transparent !important; fonctionne dans les nouveaux navigateurs

23
cdeutsch

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 vous pouviez voir le curseur clignoter au-dessus du sélecteur de calendrier.

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

Donc, dans ce cas, mon CSS fonctionne bien, évidemment l'inconvénient est que si vous avez besoin de voir ce que vous tapez, ce n'est pas bon

20
Slavo

Je pense que c'est une solution parfaite: rendre l'entrée assez large, aligner de droite à droite de l'écran, ainsi placer le curseur et le contenu à l'extérieur de l'écran, alors qu'il est toujours cliquable perfect solution

6
sinfere

Malheureusement, vous ne pouvez pas styliser le curseur de texte avec CSS. Vous ne pouvez faire que de très mauvaises astuces JavaScript, mais selon la disposition et les exigences de votre site Web, cela pourrait ne pas être possible du tout. Je recommanderais donc d'oublier l'idée.

4
2ndkauboy

<input style="position: fixed; top: -1000px">

Fonctionne dans iOS8.

3
Daiwei
function noCursor(a){
  var a = document.getElementById(a),
      b = document.createElement('input');
  b.setAttribute("style","position: absolute; right: 101%;");
  a.parentNode.insertBefore(b, a);

  if(a.addEventListener){
    b.addEventListener("input",function(){a.value = b.value});
    a.addEventListener("focus",function(){b.focus()});
  }else{
    a.attachEvent("onfocus",function(){b.focus()});
    b.attachEvent("onpropertychange",function(){a.value = b.value});
  };
 
}

noCursor('inp');
<input id="inp">

Vous pouvez utiliser la fonction pour chaque élément pour lequel vous ne voulez pas de curseur.

1
Silvester Wennekers

vient 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 tombe à l'extérieur du conteneur (dont le débordement est masqué). Les caractères réels (et le curseur clignotant) ne seront jamais visibles. Le faux div est placé sous le champ de saisie, donc un tapotement sur le faux div mettra l'accent sur l'entrée 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>
0
JasperZelf