Ukryj migający kursor textfield

Podstawową ideą jest to, że kolor kursora jest taki sam jak kolor tekstu. Więc pierwszą rzeczą, którą robisz, jest uczynienie tekstu przezroczystym, zabierając kursor ze sobą. Następnie możesz ponownie uwidocznić tekst za pomocą cienia tekstowego.

Użyj tego linku, aby zobaczyć go na żywo w jsfiddle .

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

Update:

Wiadomo, że nie działa w iOS 8 i IE 11

Inny pomysł mojego jest nieco bardziej hakerski i wymaga javascript.

HTML i CSS część:

Tworzysz 2 pola wejściowe i ustawiasz jedno dokładnie na drugim za pomocą z-index, itd. Następnie górne pole wejściowe staje się całkowicie przezroczyste, bez ostrości, bez koloru i podobne. Musisz ustawić widoczne, niższe wejście na wyłączone, tak aby pokazywało tylko zawartość powyższego wejścia, ale w rzeczywistości nie działa.

Część Javascript:

Po tym wszystkim synchronizujesz dwa wejścia. Na klawiaturze lub na zmianie Skopiuj zawartość wyższego wejścia na niższe.

Podsumowując powyższe: wpisujesz niewidoczne dane wejściowe, które zostaną wysłane do zaplecza po przesłaniu formularza, ale każda aktualizacja tekstu w nim będzie wyświetlana w dolnym widocznym, ale wyłączonym polu wprowadzania.

Szukałem sposobu, aby ukryć migający kursor na urządzeniach z systemem iOS Dla wejść daty, które uruchamiają kalendarz, ponieważ można było zobaczyć migający kursor na górze selektora kalendarza.

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

Więc w tym przypadku mój CSS działa ładnie, oczywiście minusem jest to, że jeśli chcesz zobaczyć, co piszesz, to nie jest dobrze

caret-color: transparent !important; działa w nowszych przeglądarkach

Myślę, że jest to idealne rozwiązanie: Ustaw wejście wystarczająco szerokie, wyrównaj w prawo do ekranu w prawo, dzięki czemu kursor i zawartość będą znajdować się na zewnątrz ekranu, gdy nadal można je kliknąć

Niestety nie można stylizować kursora tekstu za pomocą CSS. Możesz zrobić tylko kilka bardzo złych sztuczek JavaScript, ale w zależności od układu i wymagań witryny, może to nie być w ogóle możliwe. Polecam więc zapomnieć o całym pomyśle.

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

Działa w 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">

Możesz użyć funkcji dla każdego elementu jou want no cursor for.

Właśnie zrobiłem proof of concept dla mojego przyjaciela, używając pomysłu @ sinfere:

Demo: http://jsfiddle.net/jkrielaars/y64wjuhj/4/

Początek wejścia jest przesunięty, więc wypada poza kontener (który ma ukryty przepełnienie) Rzeczywiste karaktery (i migający kursor) nigdy nie wejdą do widoku. Fałszywy div jest umieszczony poniżej pola wejściowego, więc dotknięcie fałszywego div ustawi ostrość na niewidzialnym wejściu.

<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>

Możesz "ukryć migający kursor textfield", wywołując funkcję rozmycia przy zdarzeniu ostrości

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