如何使用 easy css, js 更改输入闪烁插入符号样式

Question

我想知道如何使用css/javascript来调整CSS搜索框内闪烁的光标？

是否可以将默认的闪烁插入符号替换为水平闪烁图标

Answer 1

我觉得没那么难。我做了一个简单的例子，它适用于除 Safari 之外的大多数现代浏览器。它在 canvas 上绘制插入符号，并将其设置为输入的背景，位于根据浏览器插入符号位置计算的位置。

它检查浏览器是否支持 caret-color css 属性，如果不支持，它什么都不做，因为系统插入符和我们的插入符将同时可见。我测试的浏览器只有Safari不支持

$("input").on('change blur mouseup focus keydown keyup', function(evt) {
  var $el = $(evt.target);
  //check if the carret can be hidden
  //AFAIK from the modern mainstream browsers
  //only Safari doesn't support caret-color
  if (!$el.css("caret-color")) return;
  var caretIndex = $el[0].selectionStart;
  var textBeforeCarret = $el.val().substring(0, caretIndex);

  var bgr = getBackgroundStyle($el, textBeforeCarret);
  $el.css("background", bgr);
  clearInterval(window.blinkInterval);
  //just an examplethis should be in a module scope, not on window level
  window.blinkInterval = setInterval(blink, 600);
})

function blink() {
 
  $("input").each((index, el) => {
    var $el = $(el);
    if ($el.css("background-blend-mode") != "normal") {
      $el.css("background-blend-mode", "normal");
    } else {
      $el.css("background-blend-mode", "color-burn");
    }
  });
}


function getBackgroundStyle($el, text) {
  var fontSize = $el.css("font-size");
  var fontFamily = $el.css("font-family");

  var font = fontSize + " " + fontFamily;
  var canvas = $el.data("carretCanvas");
  //cache the canvas for performance reasons
  //it is a good idea to invalidate if the input size changes because of the browser text resize/zoom)
  if (canvas == null) {
    canvas = document.createElement("canvas");
    $el.data("carretCanvas", canvas);
    var ctx = canvas.getContext("2d");
    ctx.font = font;
    ctx.strokeStyle = $el.css("color");
    ctx.lineWidth = Math.ceil(parseInt(fontSize) / 5);
    ctx.beginPath();
    ctx.moveTo(0, 0);
    //aproximate width of the caret
    ctx.lineTo(parseInt(fontSize) / 2, 0);
    ctx.stroke();
  }
  var offsetLeft = canvas.getContext("2d").measureText(text).width + parseInt($el.css("padding-left"));
  return "#fff url(" + canvas.toDataURL() + ") no-repeat " +
    (offsetLeft - $el.scrollLeft()) + "px " +
    ($el.height() + parseInt($el.css("padding-top"))) + "px";
}

input {
  caret-color: transparent;
  padding: 3px;
  font-size: 15px;
  color: #2795EE;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />

如果有兴趣，我可以稍微清理一下并将其包装在 jQuery 插件中。

编辑：忘了闪烁，所以我添加了它。更好的方法是将其添加为 css 动画，在这种情况下，插入符应位于输入上方的单独 html 元素中。

Answer 2

最新标准支持更改插入符号的颜色。但不改变它的宽度不是，我认为这是一种耻辱，因为这是一个视力障碍者的可访问性问题。

自己实施此类更改的一种方法是首先尝试找出插入符号闪烁的位置，然后用看起来像插入符号但可能更宽的元素覆盖它等。

这是一篇关于如何着手做这样的事情的文章。这是一篇好文章，但最终解决方案总体上有点复杂。但看看它是否解决了您的问题：

https://medium.com/@jh3y/how-to-where-s-the-caret-getting-the-xy-position-of-the-caret-a24ba372990a

这里也许是关于如何找到护理 x-y 位置的更简单的解释： How do I get the (x, y) pixel coordinates of the caret in text boxes?

如何使用 easy css, js 更改输入闪烁插入符号样式

How can I change input blink caret style with easy css, js

css

caret

input-field