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 unadiv
.- Añadido el número máximo de caracteres
maxlength="25"
directamente en el elemento de entradainput
en lo HTML. (Preferencial. Arreglar por ahora. Pensando en crear una función de desplazamiento o no)- Algunas correcciones de código CSS
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);
});
/* 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; }
}
<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>