Skip to main content
3 de 5
se añadieron 1102 caracteres en el cuerpo
Chun
  • 881
  • 6
  • 21

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

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>

Chun
  • 881
  • 6
  • 21