Skip to main content
2 de 5
se añadieron 279 caracteres en el cuerpo
Chun
  • 881
  • 6
  • 21

Aquí está un hack de jQuery y CSS para hacer que esto funcione:

var $inputColorSwap = $('#input-color-swap');
var $icsMask = $('#ics-mask');

$inputColorSwap.keyup(function(){
    // Esto clona el texto de entrada
    $icsMask.text($(this).val());

    var $icsData = $icsMask.text().trim();
    var $icsStr = "";
    var $icsAmount = 5; // Cantidad de caracteres

    // loop contador de caracteres
    for(var i = 0; i < $icsAmount; i++) {
        $icsStr += $icsData[i];
    }
    // Envuelve los primeros 5 caracteres en color rojo
    $icsData = $icsData.replace( $icsStr, '<span style="color: red;">' + $icsStr + '</span>' );
    // Imprime la cosa completa, Y añade una clase para tratar el efecto de máquina de escribir en CSS
    $icsMask.html('<div class="ics-mask-wrapper">'+ $icsData +'</div>');
});
/* Evita que elementos absolutos salgan del envoltorio */
.ics-wrapper{
    position:relative;
    width: 180px; /* Ancho deseado */
}
/* Oculta la entrada para fines de lo hack */
#input-color-swap {
    width: 100%;
    opacity: 0;
}
/* Coloca la entrada clonada encima de la entrada real "input" */
#ics-mask {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border: 1px solid #a9a9a9;
    background-color: #fff;
    pointer-events: none;
    overflow: hidden;
}
/* Añade el efecto de enfoque */
#input-color-swap:focus + #ics-mask {
    border: 1px solid rgba(81, 203, 238, 1);
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}

/* EFECTO DEL CURSOR */
.ics-mask-wrapper {
    display: inline-block;
    border-right: 1px solid #000; /* El cursor de máquina de escribir */
    white-space: nowrap; /* Mantiene el contenido en una línea sola */
    animation: blink-caret .75s step-end infinite;
}

/* El efecto de cursor de máquina de escribir  */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #000; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="ics-wrapper">
    <input id="input-color-swap"/>
    <div id="ics-mask"></div>
</div>

Chun
  • 881
  • 6
  • 21