Skip to main content
Commonmark migration
Origen Enlace

##(Nueva edición de mejoras)

(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

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

(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
se añadieron 239 caracteres en el cuerpo
Origen Enlace
Chun
  • 881
  • 6
  • 21

##(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
var $inputColorSwap = $('#input-color-swap');
var $icsMask = $('#ics-mask');
var $icsPlaceholder = 'Escriba algo aquí...';
$icsMask.html('<div class="ics-mask-wrapper"><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);
});
/* 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;}
<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>

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

##(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
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);
});
/* 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;}
<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>
se añadieron 1102 caracteres en el cuerpo
Origen Enlace
Chun
  • 881
  • 6
  • 21

##(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 #000;transparent; /* El cursor de máquina de escribir */
    white-space: nowrap; /* Mantiene el contenido en una línea sola */
    animationpadding-right: blink-caret1px; .75s/* step-endDistancia infinite;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>
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>');
});
/* 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; }
}
<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>

##(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>
se añadieron 279 caracteres en el cuerpo
Origen Enlace
Chun
  • 881
  • 6
  • 21
Loading
Origen Enlace
Chun
  • 881
  • 6
  • 21
Loading