Comment est-ce que je peux changer le style de blink d'entrée avec easy css, js

Question

Je me demande comment puis-je utiliser css/javascript pour ajuster le curseur clignotant dans le champ de recherche avec CSS?

Est-il possible de remplacer par défaut blinkig caret à l'horizontale icône clignotante

Answer 1

Je ne pense pas qu'il est si difficile. J'ai fait un exemple rapide, qui fonctionne dans la plupart des navigateurs modernes sauf Safari. Il dessine le curseur sur une toile et le place comme arrière-plan de l'entrée, sur une position calculée à partir de la position du curseur du navigateur.

Il vérifie si le navigateur supporte la propriété css caret-color, et si ce n'est pas le cas, il ne fait rien, car le caret du système et notre caret seront visibles en même temps. Parmi les navigateurs que j'ai testés, seul Safari ne le supporte pas.

$("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" />

S'il y a intérêt, je peux nettoyer un peu et l'envelopper dans un plugin jQuery.

Modifier: oublié le clignotement, donc je l'ai ajouté. Une meilleure façon sera de l'ajouter en tant qu'animation CSS, dans ce cas, le curseur devrait être dans un élément html séparé positionné sur l'entrée.