Come nascondere il cursore lampeggiante della casella di testo?

Question

Ho bisogno di nascondere il cursore lampeggiante della casella di testo in CSS/Javascript.

È possibile?

Answer 1

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

perché non riesco a vedere qualsiasi altro motivo si potrebbe desiderare di farlo.

edit:

i immagino si desidera consentire all'utente di scorrere il testo che è più grande della zona, ma non mostra il lampeggiante?

se è così, si desidera comunque disabilitarlo. non solo nascondere il cursore lampeggiante. se l'utente non può digitare lì, dovrebbe essere disabilitato. periodo.

ora, se si desidera comunque consentire all'utente di vedere tutto il contenuto, è necessario rendere l'input grande come il contenuto. non c'è modo di sfuggirgli.

e quindi limitare la dimensione con un genitore div con CSS overflow: hidden o scroll.

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

Answer 2

Si potrebbe impostare un maxlength sulla casella di testo e quindi utilizzare text-indent per spostare il cursore posteriore più caratteri rispetto alla maxlength.

Ad esempio, è possibile impostare maxlength=20 e quindi per la casella di testo text-indent: -20em in questo modo il testo inizia dai limiti del riquadro e non può mai venire in vista.

Answer 3

Questo è piuttosto vecchio, ma mi stavo solo occupando di un problema simile. Per i browser che la supportano (ovvero non IE8), puoi impostare il colore dell'elemento di input in modo che sia uguale al suo sfondo (probabilmente bianco), quindi il cursore sarà invisibile.

Answer 4

Posiziona il cursore sullo stesso colore dello sfondo?

Answer 5

Ecco la mia soluzione da un'altra domanda, che ho risposto già:

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

---

L'idea di base è che il colore del cursore è lo stesso colore del testo. Quindi la prima cosa che fai è rendere il testo trasparente, portando così il cursore lontano da esso. Quindi puoi rendere il testo nuovamente visibile con un'ombra di testo.

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

Attenzione:

Non sembra funzionare sotto iOS 8. (Grazie @Altaveron per informazioni)

---

Un'altra idea del mio è un po 'più hacky e richiede javascript.

HTML e CSS parte:

Si fanno i campi di input e 2 posizione uno esattamente sopra l'altra con z-index, eccQuindi rendi il campo di input superiore completamente trasparente, senza messa a fuoco, senza colori e simili. È necessario impostare l'ingresso visibile e inferiore su disattivato, in modo che mostri solo il contenuto dell'ingresso precedente, ma in realtà non funzioni.

Javascript parte:

Dopo tutto quanto sopra si sincronizza i due ingressi. Alla pressione del tasto o al cambio, si copia il contenuto dell'ingresso superiore in basso.

Sommando tutto quanto sopra: si digita un ingresso invisibile, e che verrà inviato al backend quando il modulo inviato, ma ogni aggiornamento del testo in esso verranno ripresi nel campo di ingresso inferiore visibile, ma disabilitato.

Answer 6

Se si tratta di un input con l'attributo readonly = "readonly", Safari su iOS mostra ancora un cursore lampeggiante quando si concentra su di esso.

Quindi, per rimuovere il lampeggio, i seguenti ha lavorato per me:

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