Cache textfield curseur clignotant

l'idée de base est que la couleur du curseur est la même que celle du texte. Donc la première chose que vous faites est de rendre le texte transparent, en enlevant ainsi le curseur avec elle. 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 en iOS 8 et IE 11

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

HTML et CSS de la partie:

vous faites 2 champs d'entrée et positionnez l'un exactement sur l'autre avec z-index, etc. Ensuite, vous rendez le champ d'entrée supérieur complètement transparent, pas de mise au point, pas de couleur, et ainsi de suite. Vous avez besoin de définir le visible, entrée inférieure à désactivé, de sorte qu'il affiche 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. Sur keypress ou sur change vous copiez le contenu de l'entrée supérieure vers le bas.

résumant tout ce qui précède: vous tapez une entrée invisible, qui sera envoyée à l'arrière-plan lorsque le formulaire sera soumis, mais chaque mise à jour du texte qu'il contient sera répercutée dans le bas champ d'entrée visible, mais désactivé.

je cherchais un moyen de cacher le curseur clignotant sur les appareils iOS pour les entrées de date qui déclenchent un calendrier, parce que vous pouviez voir le curseur clignotant sur le 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 alors il n'est pas bon

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

je pense que c'est une solution parfaite: faites la saisie assez large, alignez-vous à droite de l'écran, ainsi le curseur et le contenu localisent à l'extérieur de l'écran, alors qu'il est encore cliquable

malheureusement, vous ne pouvez pas le curseur de texte avec CSS. Vous pouvez seulement faire quelques très mauvais trucs JavaScript, mais selon la mise en page et les exigences de votre site web, il pourrait ne pas être possible du tout. Je recommande donc d'oublier toute l'idée.

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

Travaille dans iOS8.

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.

vient de faire une preuve de concept pour un ami à moi, 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 (qui a débordement caché) Les caractères réels (et le curseur clignotant) ne seront jamais entrer en vue. Le faux div est placé sous le champ d'entrée de sorte qu'un clic 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>

vous pouvez "masquer le curseur clignotant de textfield" en appelant fonction de flou sur l'événement de mise au point

<input type="text" onfocus="this.blur()"/>