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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    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>');
    });

<!-- language: lang-css -->

    /* 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; }
    }

<!-- language: lang-html -->

    <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>

<!-- end snippet -->