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

Question

Как я могу использовать этот квадратный курсор (изображение ниже) в тегах ввода?

Answer 1

Пример

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

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

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

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

$(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

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

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

Answer 3

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

Answer 4

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

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

Answer 5

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