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 > - "`placeholder`" hack añadido <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> var $inputColorSwap = $('#input-color-swap'); var $icsMask = $('#ics-mask'); var $icsPlaceholder = 'Escriba algo aquí...'; $icsMask.html('<div class="ics-mask-wrapper"><div class="ics-placeholder">'+$icsPlaceholder+'</div></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(){ $('.ics-placeholder').remove(); 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 { color:#000; 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; } } .ics-placeholder{color:#ababab;} <!-- 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 -->