我怎樣才能改變輸入眨眼脫字符簡單的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元素中。