Come nascondere la casella di testo cursore lampeggiante?

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

È possibile?

Perché? L’utente sarà l’immissione di dati in quel campo? Se è così, questo suona come una usabilità incubo.
Vuoi loro di entrare in questa casella di testo? Che cosa è l’uso? Si può sempre reindirizzare la messa a fuoco distanza di un clic o di messa a fuoco evento sulla scatola…ma che è il caso di utilizzo qui?
Io di certo non la speranza. Che sarebbe molto fastidioso se non ho potuto vedere dove che stavo scrivendo.
Non si vuole nascondere o cambiare per un altro tipo?
“Voglio personalizzarlo dove non dovrebbe apparire come casella di testo” –> ok, è possibile modificare l’aspetto, ma ha ancora bisogno di comportarsi come una casella di testo

OriginaleL’autore Santhosh | 2010-01-29

5 Replies
  1. 1
    <input type=text disabled="disabled"/>

    perché non riesco a vedere qualsiasi altra ragione, si potrebbe desiderare di farlo.

    edit:

    ho indovinare si desidera consentire all’utente di scorrere il testo che è più grande dell’area, ma non per mostrare il lampeggiante?

    se è così, si desidera disattivare. non solo nascondere il cursore lampeggiante. se l’utente non può tipo, dovrebbe essere disabilitato. periodo.

    ora, se si desidera consentire all’utente di visualizzare tutti i contenuti, è necessario fare in modo che ingresso, grande come il contenuto. non è possibile sfuggire.

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

    <div style="overflow: scroll-x;"><input size=255 value="some string 255 char long" /></div>
    Il corretto valore dell’attributo è disabled e non true: disabled="disabled".
    questo è corretto per XHTML, ma non c’è spesso la necessità di usare XHTML. Più semplice è quello di scrivere le pagine in HTML e utilizzare solo disabled, senza valore.
    In basso: Il valore corretto per l’HTML è disabled troppo. C’è solo che il valore dell’attributo può essere omesso in quanto l’unica valida valore dell’attributo disabled è implicita (vedi w3.org/TR/html4/interact/forms.html#adef-disabled).
    beh, sì. Ci sono due modi corretti di utilizzo di un attributo booleano in HTML 4: con nessun valore o con un valore che è lo stesso come il suo nome. Né è più corretto di altri, sebbene la seguente riga in fondo w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2 è degno di nota: “gli Autori dovrebbero essere consapevoli del fatto che molti agenti utente di riconoscere solo il modulo ridotto di attributi booleani e non la forma completa.”.
    Come è la risposta giusta? Questo non è fare ciò che è richiesto per… Quello che stiamo cercando è quello di nascondere il cursore, ma ancora all’ingresso di abilitazione

    OriginaleL’autore gcb

  2. 13

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

    Per esempio, è possibile impostare maxlength=20 e quindi per la casella di testo impostare text-indent: -20em che modo il testo inizia fuori dalla scatola confini e non può mai vista.

    Molto intelligente. 😉
    ma che nasconde anche tutto il testo nella casella di testo…. credo che l’autore desidera qualcosa di simile che consente di scorrere il testo, ma non mostra il cursore lampeggiante… ma è solo un’ipotesi come la sua domanda è stata di 2 linee.

    OriginaleL’autore Kevin McTigue

  3. 4

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

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


    L’idea di base è che il cursore del colore è lo stesso come il colore del testo. Quindi la prima cosa da fare è rendere il testo trasparente, tenendo quindi il cursore. Quindi è possibile rendere il testo di nuovo visibile, con un testo in ombra.

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

    Attenzione:

    Non sembra di lavorare in iOS 8. (Grazie @Altaveron per le info)


    Un’altra idea mia è un po ‘ più sporca e richiede javascript.

    HTML e CSS parte:

    Si fanno 2 campi di input e una posizione esattamente sopra l’altro con z-index, etc. Quindi è rendere la parte superiore del campo di input completamente trasparente, nessun fuoco, nessun colore, e simili.
    È necessario impostare il visibile, inferiore di ingresso per disabili, in modo da visualizzare solo il contenuto del testo precedente, ma in realtà non funziona.

    Parte Javascript:

    Dopo tutto ciò che hai sincronizzato i due ingressi. Su pressione di un tasto o su modifica si copia il contenuto del le di ingresso maggiore di quella inferiore.

    Sommando tutto quanto sopra: si tipo in un invisibile ingresso, e che sarà inviato al backend quando il modulo viene inviato, ma ogni aggiornamento del testo che verrà visualizzato nella parte inferiore visibile, ma per disabili campo di input.

    OriginaleL’autore Lajos Meszaros

  4. 2

    Questo è abbastanza vecchio, ma non ho avuto che fare con un problema simile. Per i browser che lo supportano (nel senso, non IE8), è possibile impostare il colore dell’elemento di input per essere lo stesso come il suo sfondo (e probabilmente bianchi), e quindi il cursore invisibile.

    OriginaleL’autore sagittarian

  5. 0

    Se è un input con il readonly=”readonly” attributo, Safari su iOS ancora mostra un cursore lampeggiante durante la messa a fuoco su di esso.

    Modo per rimuovere il lampeggiante, il seguente lavorato per me:

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

    OriginaleL’autore joegeringer

Lascia un commento