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)
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;}
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; }
}
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;}
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-endDistanciainfinite;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; }
}
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.75sstep-endinfinite;
}
/* El efecto de cursor de máquina de escribir */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #000; }
}
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;/*Distanciaentre 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; }
}