javascript - page - ¿Cómo usar este cursor cuadrado en un campo de entrada HTML?

style title html css

Question

¿Cómo puedo usar este cursor cuadrado (imagen de abajo) en las etiquetas de entrada?

Answer 1

Muestra

He cambiado cómo funciona , y parece resolver algunos problemas :)

• Acepta cualquier texto que una entrada normal pueda
• Trabajos de retroceso
• Teóricamente puede soportar pegar texto

Las advertencias habituales se aplican todavía, sobre todo la incapacidad de ver visualmente dónde está el cursor.

Pensaría mucho en si vale la pena implementar esta solución, en función de sus inconvenientes y problemas de usabilidad.

$(function() {
  var cursor;
  $(''#cmd'').click(function() {
    $(''input'').focus();
    cursor = window.setInterval(function() {
      if ($(''#cursor'').css(''visibility'') === ''visible'') {
        $(''#cursor'').css({
          visibility: ''hidden''
        });
      } else {
        $(''#cursor'').css({
          visibility: ''visible''
        });
      }
    }, 500);

  });

  $(''input'').keyup(function() {
    $(''#cmd span'').text($(this).val());
  });

  $(''input'').blur(function() {
    clearInterval(cursor);
    $(''#cursor'').css({
      visibility: ''visible''
    });
  });
});

#cmd {
  font-family: courier;
  font-size: 14px;
  background: black;
  color: #21f838;
  padding: 5px;
  overflow: hidden;
}
#cmd span {
  float: left;
  padding-left: 3px;
  white-space: pre;
}
#cursor {
  float: left;
  width: 5px;
  height: 14px;
  background: #21f838;
}
input {
  width: 0;
  height: 0;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cmd">
  <span></span>
  <div id="cursor"></div>
</div>

<input type="text" name="command" value="" />

Answer 2

AFAIK, eso no es posible para el cuadro de texto html, puede aplicar un estilo a la entrada en sí, pero no puede hacer nada respecto al cursor, excepto aplicar las opciones del cursor que ya están disponibles :(

Answer 3

Para las etiquetas <input> , no hay mucho que puedas hacer. Si no le importó que fuera un hack horrible, siempre puede usar JavaScript para cambiar el tamaño del cuadro de texto según sea necesario (establecer width = *something* * count ), y tener un <img> con el cursor a la derecha.

No creo que haya menos soluciones ''ugh'', la barra maneja la entrada de texto, lo que probablemente sea una exageración.

Answer 4

Tendría que 1) rodar su propio cuadro de texto y 2) ocultar el cursor real enfocándolo continuamente en otro lugar. Luego, capture los eventos clave a nivel de documento / cuerpo e inserte ese valor en su propio elemento. El cursor sería un GIF animado que siempre se colocó en el extremo derecho de su "cuadro de texto".

Tendrá problemas con el # 2, y todo esto generalmente es desaconsejable. HTML 5 abre nuevas posibilidades, pero sigue siendo un montón de trabajo para un cursor.

Answer 5

tu no puedes lo que significa que puede hacerlo usted mismo usando una fuente fija con, use un fondo de gif als parpadeante, cuya posición se establece dinámicamente al calcular el valor con el texto ya escrito, pero habrá un cursor "normal" sobre su gif, haciendo fea esta solución