Как использовать этот квадратный курсор в поле ввода HTML?

Ответ 1

Пример

Я изменил способ работы, и, похоже, он решает несколько проблем:)

• Принимает любой текст, который может содержать обычный ввод
• Работа Backspace
• Теоретически может поддерживать вставку текста

Обычные оговорки применяются до сих пор, прежде всего неспособность визуально видеть, где находится карет.

Я думаю, длинный и жесткий, стоит ли это решение реализовать, исходя из его недостатков и проблем с удобством использования.

$(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="" />

Ответ 2

AFAIK, что невозможно для текстового окна html, вы можете стилизовать сам вход, но вы ничего не можете сделать о курсоре, кроме применения уже доступных параметров курсора: (

Ответ 3

Для тегов <input> вы не можете сделать это. Если вы не возражаете, что это ужасный хак, вы всегда можете использовать JavaScript для изменения размера текстового поля (установите width = *something* * count) и <img> с курсором вправо.

Я не думаю, что есть меньше решений "ugh", бар, обрабатывающий ввод текста самостоятельно, что, вероятно, слишком велико.

Ответ 4

вы не можете. что означает: вы можете сделать это самостоятельно, используя шрифт с фиксированным шрифтом, используйте мигающий фон gif als, положение которого задано динамически, вычисляя с уже набранным текстом, - но над вашим gif будет "нормальный" курсор, делая это решение уродливым

Ответ 5

Вам нужно было бы 1) свернуть свое собственное текстовое поле и 2) скрыть реальный курсор, постоянно фокусируя его в другом месте. Затем запишите ключевые события на уровне документа/тела и вставьте это значение в свой собственный элемент. Тогда курсором будет анимированный GIF, который всегда был расположен в правой части вашего текстового поля.

У вас возникнут проблемы с №2, и все это вообще нецелесообразно. HTML 5 открывает некоторые новые возможности, но для курсора все еще очень много работы.