簡単なCSS、jsで入力点滅のキャレットスタイルを変更する方法

Question

CSSで検索ボックス内の点滅カーソルを調整するには、CSS/JavaScriptを使用するにはどうすればよいですか？

それは私はそれは一生懸命だとは思わない水平点滅アイコン

Answer 1

にデフォルトblinkigキャレットを交換することが可能です。私はSafari以外のほとんどの最新のブラウザで動作する簡単な例を作った。 キャレット上にキャレットを描画し、ブラウザのキャレット位置から計算された位置に入力の背景として設定します。

ブラウザが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要素にある必要があります。