показывать каретку только для ввода html

Question

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

. Я хочу показать курсор, чтобы пользователь знал, куда будет вставлен номер или оператор.

К сожалению, ввод только для чтения показывает курсор только в Firefox Mobile, а не в Chrome Mobile.Поэтому я не могу положиться на встроенный курсор.

Мне нужен способ показать курсор для поля ввода, пока виртуальная клавиатура не открыта, при щелчке в поле ввода.

Answer 1

Чтобы решить проблему, я реализовал свою собственную карету.Я создал div с шириной 1px и правильной высотой.#caret расположен относительно .input-group.

. Для простоты я использую моноширинный шрифт на входе.Таким образом, каждый символ имеет одинаковую ширину.Затем я просто слушаю любое событие на входе и обновляю положение каретки соответственно.text-shadow и прозрачный color делают оригинальную каретку невидимой на мобильном телефоне Firefox.

Мое поле ввода выровнено по правому краю.

Обновлено https://jsfiddle.net/9fr46y2w/3/

HTML

<div class="input-group">
  <input type="text" id="input" onclick="showCaret(this);">
  <div id="caret"></div>
</div>

CSS

#input {
  color: transparent;
  font-family: monospace;
  font-size: 36px;
  height: 48px;
  margin: 0;
  padding: 0;
  text-align: right;
  text-shadow: 0 0 0 #yourTextColor;
  width: 100%;
}

.input-group {
  margin: 0;
  padding: 0;
  position: relative;
}

#caret {
  background: white;
  color: transparent;
  height: 41px;
  position: absolute;
  top: 4px;
  right:0;
  width: 1px;

  animation-duration: 1s;
  animation-name: blink;
  animation-iteration-count: infinite;
}

@keyframes blink {
  from {
    opacity: 1; 
  }

  49.9% {
      opacity: 1;
  }
  50% {
    opacity: 0;
  }

  99.9% {
      opacity: 0;
  }

  to {
    opacity: 1;
  }
 } 

JavaScript

function showCaret(input) {
  let widthSizeRatio = 21.6/36;
  let charWidth = widthSizeRatio * 36;
  let length = input.value.length;
  let cur = input.selectionStart;

  document.getElementById("caret").style.right = Math.floor((length - cur) * charWidth) + "px";
}