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

> ##(Nueva edición de mejoras)
> - Cursor de máquina de escribir ahora también aparece en el foco
> - Cuando se hace clic en la entrada `input`, el cursor pasa automáticamente al final del texto. Para arreglar la parte que no podemos poner el cursor donde queramos en medio del texto, porque se trata de una `div`.
> - Añadido el número máximo de caracteres `maxlength="25"` directamente en el elemento de entrada `input` en lo HTML. (Preferencial. Arreglar por ahora. Pensando en crear una función de desplazamiento o no)
> - Algunas correcciones de código CSS

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

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

    var $inputColorSwap = $('#input-color-swap');
    var $icsMask = $('#ics-mask');
    $icsMask.html('<div class="ics-mask-wrapper"></div>');

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

    // fix for typewriter cursor go to the end
    $inputColorSwap.on('click', function(){
        var strLength= $inputColorSwap.val().length;
        $inputColorSwap[0].setSelectionRange(strLength, strLength);
    });

<!-- 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;
        border: none;
        padding: 0;
        margin: 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);
    }
    #input-color-swap:focus + #ics-mask .ics-mask-wrapper {
        height:100%;
        animation: blink-caret .75s step-end infinite;
    }

    /* EFECTO DEL CURSOR */
    .ics-mask-wrapper {
        display: inline-block;
        border-right: 1px solid transparent; /* El cursor de máquina de escribir */
        white-space: nowrap; /* Mantiene el contenido en una línea sola */
        padding-right: 1px; /* Distancia entre el cursor al texto */
    }

    /* 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" maxlength="25"/>
        <div id="ics-mask"></div>
    </div>

<!-- end snippet -->