¿Cómo ocultar el cursor parpadeante del cuadro de texto?

Question

Necesito ocultar el cursor parpadeante del cuadro de texto en CSS/Javascript.

¿Es posible?

Answer 1

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

porque no veo ninguna otra razón por la que desee hacer eso.

edición:

i supongo desea permitir al usuario desplazarse el texto que es mayor que el área, pero no muestro el parpadeo?

si es así, aún desea deshabilitarlo. no solo ocultar el cursor parpadeante. si el usuario no puede escribir allí, debe estar deshabilitado. período.

ahora, si aún desea permitir que el usuario vea todo el contenido, debe hacer una entrada tan grande como el contenido. no hay escapatoria de eso.

y luego limite el tamaño con un padre div con CSS overflow: hidden o scroll.

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

Answer 2

Se podría establecer un maxlength en el cuadro de texto y luego usar text-indent para mover el cursor hacia atrás más caracteres que el maxlength.

Por ejemplo, puede establecer maxlength=20 y luego para el cuadro de texto establecer text-indent: -20em de esa manera el texto comienza fuera de los límites de la caja y nunca puede aparecer.

Answer 3

Esto es bastante viejo, pero estaba lidiando con un problema similar. Para navegadores compatibles (es decir, no IE8), puede configurar el color del elemento de entrada para que sea el mismo que el fondo (probablemente blanco), y luego el cursor será invisible.

Answer 4

Haga que el cursor sea del mismo color que el fondo?

Answer 5

Aquí es mi herramienta de otra cuestión, que ya respondí:

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

---

La idea básica es que el color del cursor es el mismo que el color del texto. Entonces, lo primero que debes hacer es hacer que el texto sea transparente, sacando así el cursor. Luego puede hacer que el texto sea visible nuevamente con una sombra de texto.

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

Advertencia:

No parece trabajar bajo iOS 8. (Gracias por la informacion @Altaveron)

---

Otra idea de mi es un poco más y hacky requiere javascript

HTML y CSS parte:

Haces campos de entrada 2 y la posición de uno exactamente en la parte superior de la otra con z-index, etc.Luego, hace que el campo de entrada superior sea completamente transparente, sin foco, sin color y similar. Debe configurar la entrada visible, más baja en desactivada, de modo que solo muestre el contenido de la entrada anterior, pero no funcione realmente.

Javascript parte:

Después de todo lo anterior que sincronice las dos entradas. Al presionar las teclas o al cambiar, copia los contenidos de la entrada más alta a la más baja.

Sumando todo lo anterior: escribe una entrada invisible, que se enviará al backend cuando se envíe el formulario, pero cada actualización del texto se repetirá en el campo de entrada más visible pero no habilitado.

Answer 6

Si se trata de una entrada con el atributo readonly = "readonly", Safari en iOS todavía muestra un cursor parpadeante al enfocarlo.

Así que para eliminar el parpadeo, los siguientes trabajó para mí:

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