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>