我怎样才能改变输入眨眼脱字符简单的CSS，js

Question

我不知道如何使用CSS/JavaScript来调整CSS中的搜索框内闪烁的光标？

是否可以更换默认blinkig插入符为水平闪烁的图标

Answer 1

我不认为这是这么难。我做了一个快速示例，它适用于除Safari之外的大多数现代浏览器。 它将插入符号绘制在画布上，并将其设置为输入的背景，并将其设置为从浏览器插入位置计算出的位置。

它检查浏览器是否支持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元素中。