cómo ocultar el cursor parpadeante en el texto de entrada?

Quiero hacer algo que se vea como una entrada de selección, pero en realidad no lo es, aquí están los pasos.cómo ocultar el cursor parpadeante en el texto de entrada?

Hice un <input type="text">.

He añadido un background-image, que mostrará una "flecha de selección", dando la impresión de que es un cuadro de selección.

Agregué un valor predeterminado a esta entrada.

Habrá un div oculto que será SlideDown() justo debajo de esta entrada cuando haga clic en él.

He intentado lo de solo lectura para que no se pueda cambiar el valor, pero aparecerá el cursor parpadeante.

Si uso disabled, el cursor parpadeante no se mostrará, pero la función .click() o .focus en jQuery no funcionará. El menú desplegable no será SlideDown().

¿Cómo puedo hacer que se pueda hacer clic mientras no se muestra el cursor parpadeante?

Aquí está el código

<div style="padding-top:17px; overflow:hidden;"> 
    <div style="float:left;"> 
     <label for="secretquestion">Secret Question</label><br> 
     <input type="text" class="inputselect" id="secretquestion" name="secretquestion" value="Choose a Secret Question" tabindex=10 /><br> 
     <div class="selectoptions" id="secretquestionoptions"> 
      <b>test</b> 
     </div> 
    </div> 
</div>

CSS

.selectoptions 
{ 
    display: none; 
    background-color: white; 
    color: rgb(46,97,158); 
    width: 250px; 
    margin:auto; 
    border-style: solid; 
    border-width:1px; 
    border-color: rgb(46,97,158); 
    font-size: 14px; 
    text-align: center; 
} 

.inputselect { 
    color: white; 
    cursor: pointer; 
    background-image: url('inputselect.png'); 
    padding-top: 5px; 
    padding-bottom: 5px; 
    padding-left:10px; 
    padding-right:-10px; 
    width:240px; 
    border-style: solid; 
    border-color: rgb(46,97,158); 
    border-width: 1px; 
} 
.inputselect:hover { 
    outline:none;  
    color:aqua; 
    cursor: pointer; 
    background-image: url('inputselecthover.png'); 
} 
.inputselect:focus { 
    outline:none;  
    color:aqua; 
    cursor: pointer; 
    background-image: url('inputselecthover.png'); 
}

Fuente

2012-02-17 user1213707

¿Puedes publicar el código que probaste? – sinemetu1

[Una posible solución] (http://stackoverflow.com/questions/3671141/hide-textfield-blinking-cursor). Otra solución es utilizar un estilo div para que parezca una entrada en lugar de una entrada real. – approxiblue

@JimmyX sí, pensé en eso, pero la cosa es que esta entrada (seleccionar) está en un formulario, los campos de entrada se parecen entre sí, y no tengo ganas de romper la regla, y diseño otro div con una apariencia falsa: P – user1213707

El color del cursor coincide con el color del texto.

<input type="text" style="color: transparent">

Si realmente desea mostrar texto en el cuadro de entrada (mi, algunas personas son necesitados), puede utilizar una sombra de texto.

<style> 
    body, div, input { 
     color: #afa; 
     text-shadow: 0px 0px 1px #fff; 
    } 
<style>

(probado Firefox y Safari).

Fuente

2012-04-21 01:19:09 Orwellophile

¡Guau! ¡Qué idea tan brillante! También es posible escribir 'text-shadow: 0 0 0 #fff;' - que proporciona el mismo texto nítido en la misma posición que el original. –

Parece que no funciona en IE 10 http://jsfiddle.net/plowdawg/mk77W/ aún se muestra el cursor negro parpadeante. –

Sí, no funciona en IE 10. – Gavin

Acabo de utilizar una imagen borrosa para deshacerme del cursor.

$('input').mousedown(function(e){ 
    e.preventDefault(); 
    $(this).blur(); 
    return false; 
});

Fuente

2013-05-13 22:18:19 rtconner

+15

Esto funciona muy bien si no quieres escribir en la entrada ... – corescan

Estoy seguro de que OP no quiere que nadie pueda escribir. Dijo que probó "solo", pero el cursor aún apareció. Simplemente está utilizando una entrada por el simple hecho de navegar por el teclado, pero quiere que se comporte como un cuadro de selección. –

-12

Agregar tipo = "enviar" también debería funcionar.

Fuente

2013-05-29 06:40:48 szpapas

¿Cuidar para explicar? –

Creo que esta es una solución perfecta: hacer que la entrada lo suficientemente ancho, alinear a la derecha de la pantalla derecha, por lo tanto hacen cursor y contenido de localizar en el exterior de la pantalla, mientras que todavía se puede hacer clic

perfect solution

Fuente

2015-05-03 05:56:01 sinfere

Finalmente encuentro una solución truco.

<div class="wrapper"> 
    <input type="text" /> 
</div> 

.wrappr { 
    width: 100px; 
    height: 30px; 
    overflow: hidden; 
} 
.wrapper input { 
    width: 120px; 
    height: 30px; 
    margin-left: -20px; 
    text-align: left; 
}

y en mi opinión, ¡funciona!

Fuente

2016-02-17 10:07:13 wupeng

Esto puede ser útil (aunque no es una respuesta completa) - Lo utilicé para deshabilitar la entrada en un reciente proyecto:

document.getElementById('Object').readOnly = true; 
    document.getElementById('Object').style.backgroundColor = '#e6e6e6'; 
    document.getElementById('Object').onfocus = function(){ 
     document.getElementById('Object').blur(); 
    };

El usuario se centra en la entrada cuando el clic en él, el desenfoque() función luego elimina el foco. Entre esto, estableciendo el readOnly en "True" y configurando el color de fondo en gris (# e6e6e6), su usuario no debe confundirse.

Fuente

2018-02-23 12:49:24

cómo ocultar el cursor parpadeante en el texto de entrada?

Respuesta

Cuestiones relacionadas