Jak ukryć migający kursor pola tekstowego?

Question

Muszę ukryć kursor migający w polu CSS/Javascript.

Czy to możliwe?

Answer 1

<input type=text disabled="disabled"/> 

ponieważ nie widzę żadnego innego powodu, dla którego mógłbyś chcieć.

edit:

i odgadnąć chcesz zezwolić użytkownikowi na przewijanie tekstu, który jest większy niż obszar, ale nie pokazują miga?

Jeśli tak, nadal chcesz to wyłączyć. nie tylko ukryć migający kursor. jeśli użytkownik nie może tam wpisać, powinien być wyłączony. Kropka.

Teraz, jeśli nadal chcesz zezwolić użytkownikowi na wyświetlenie całej zawartości, musisz wprowadzić dane tak duże, jak zawartość. nie ma ucieczki.

a następnie ograniczyć rozmiar z rodzicem div z CSS overflow: hidden lub scroll.

<div style="overflow: scroll-x;"><input size=255 value="some string 255 char long" /></div> 

Answer 2

Można ustawić maxlength w polu tekstowym, a następnie użyć text-indent aby przesunąć kursor z powrotem więcej znaków niż MAXLENGTH.

Na przykład, można ustawić maxlength=20 a następnie na polu tekstowym ustawić text-indent: -20em ten sposób tekst zaczyna się od granic polu i nigdy nie może przyjść do widzenia.

Answer 3

To jest dość stare, ale miałem do czynienia z podobnym problemem. Dla przeglądarek, które go obsługują (czyli nie IE8), możesz ustawić kolor elementu wejściowego na taki sam jak jego tło (prawdopodobnie biały), a następnie kursor będzie niewidoczny.

Answer 4

Ustaw kursor w tym samym kolorze co tło?

Answer 5

Oto moje rozwiązanie z innym pytaniem, że już odpowiedział:

https://stackoverflow.com/a/23472096/1806628

---

Podstawowym założeniem jest to, że kolor kursor jest taki sam jak kolor tekstu za. Pierwszą rzeczą, którą robisz, jest uczynienie tekstu przezroczystym, odejmując od niego kursor. Następnie możesz uczynić tekst widocznym ponownie za pomocą cienia tekstowego.

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

Ostrzeżenie:

Nie wydaje się, aby pracować pod iOS 8. (dzięki @Altaveron za info)

---

Kolejny pomysł mój jest nieco bardziej hacky i wymaga javascript.

HTML i CSS część:

dokonać pola 2 wejściowe i jedną pozycję dokładnie na szczycie drugiego z z-index, itdDzięki temu 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 wyświetlało tylko treść powyższego wejścia, ale w rzeczywistości nie działa.

Javascript część:

Po wszystkich wyżej zsynchronizowaniu dwa wejścia. Po naciśnięciu klawisza lub po zmianie kopiujesz zawartość wyższego wejścia do niższego.

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

Answer 6

Jeśli jest to wejście z atrybutem readonly = "readonly", Safari na iOS nadal pokazuje migający kursor podczas ustawiania ostrości.

Tak, aby usunąć miga, co następuje pracował dla mnie:

-webkit-user-select: none; 
user-select: none;