Question

我正在创建一个计算器，希望在浏览器和移动设备上用作渐进式Web应用程序。我创建了自己的输入按钮，不想在手机上看到虚拟键盘。因此，我在readonly上使用属性input。

我想显示光标，以便用户知道将数字或运算符插入的位置。

不幸的是，只读输入仅在firefox mobile中显示光标，而在chrome mobile中不显示光标。因此，我不能依赖内置游标。

当单击输入字段时，我需要一种在未打开虚拟键盘的情况下显示输入字段的光标的方法。

Answer 1

为解决此问题，我实施了自己的插入符。我创建了一个宽度为1px且高度适当的div。 #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";
}

在只读html输入上显示插入符号

1 个答案: