3

Como puedo hacer para cuando tenga un valor mayor de dígitos en un input, estos cambien de color?

Es decir que a partir de 5 dígitos, los dígitos que se escriban después, sean de otro color.
¿Esto es posible? Estoy practicando con jQuery pero no se como aplicar esto que expongo.

<input style="color: white" />
4

5 respuestas 5

6

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

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>

6
  • Me funciona pero tengo una duda, como hago para que cuando ya tenga algo predeterminada un valor en el input no aparezca en trasnparente? @Cʜᴜɴ
    – Acd
    Commented el 16 jun. 2017 a las 15:12
  • @Acd Añade el "placeholder" a la div clonada en vez de eso. Mira mi nueva edición.
    – Chun
    Commented el 16 jun. 2017 a las 18:24
  • O sea al cargar la pagina y tenga un valor el input aparezca sin necesidad de hacerle click porque aparece en transparente y tengo un valor en el input @Cʜᴜɴ
    – Acd
    Commented el 16 jun. 2017 a las 18:37
  • Sí @Acd , Ya está en mi nueva edición. Clica en lo botón ejecutar código. Y puedes cambiar el texto al principio del código jQuery - var $icsPlaceholder = 'Escriba algo aquí...';. Estoy curioso, ¿cuál es la razón de crear un input así con dos colores? Estoy pensando en crear un proyecto en GitHub sobre esto, pero estoy pensando si más gente necesitará esto.
    – Chun
    Commented el 16 jun. 2017 a las 19:08
  • Pero no hablo de un placeHolder hablo de cargar varios input con datos dinamicamente y no aparezca en transparente @Cʜᴜɴ
    – Acd
    Commented el 16 jun. 2017 a las 19:11
4

para poner 2 colores en el mismo input puedes usar un gradient, aquí lo difícil es hacer que coincida con los 5 dígitos:

para alizar esto hacemos que el gradiente coincida con los px de cada numero y le restamos los px que abarcarían 5 dígitos.

calculamos el ancho de nuestra fuente, este debe servir para cualquier fuente Monospace

var w=parseInt($( this ).css("font-size"),10)*0.60;

luego lo cargamos al gradiente:

"-webkit-linear-gradient(left, red " + ($(this).val().length*w-w*5).toString() + "px, blue 0px, blue)"

hacemos que este valor se actualice cada vez que se presione una tecla con:

    $("#colorear").keyup(function(){
           //...
    });

y aplicas el estilo con:

$( this ).css( {"background-image":s});

el ejemplo completo quedaría:

$(".colorear").keyup(function (){
      colorear($(this));
});

$(".poner").click(function(){
  $(".colorear").each( function(){
    $(this).val('555555555');
    colorear($(this));
  });
});

function colorear(elemento){
  var w=parseInt(elemento.css("font-size"),10)*0.60;
    var s="-webkit-linear-gradient(left, red " + (elemento.val().length*w-w*5).toString() + "px, blue 0px, blue)";
    elemento.css( {"background-image":s});
}
.colorear {

  
  color:transparent;
  -webkit-background-clip: text;
  width:100%;
}

.grande {

  font-size:200%;
  
}

.enorme {
   font-size:50px;
}

.courier{
    font-family: "Courier New", Courier, monospace;
}

.lucida{
font-family:"Lucida Console", Monaco, monospace;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="colorear courier" type="text">

<input  class="colorear grande lucida" type="text" >

<input  class="colorear enorme courier" type="text" >

<button class="poner">poner 5555</button>

11
  • Esta es una solución interesante! +1
    – Chun
    Commented el 15 jun. 2017 a las 20:25
  • 1
    Uhmm, esta un poco buggy, cuando pones algunos digitos de mas pinta un numero mitad rojo y mitad azul Commented el 15 jun. 2017 a las 20:25
  • @DanielPérez es cuestión de precisión en el ancho de cada letra en px con 7.8 queda caso perfecto Commented el 15 jun. 2017 a las 20:34
  • Si hay alguna solucion para esto deberias ponerlo en la respuesta, pues deberia funcionar para distintos clientes y anchos de letras Commented el 15 jun. 2017 a las 20:35
  • @DanielPérez actualice la respuesta para solucionarlo para cualquier fuente monospace, en otras fuentes el ancho varia y no hay forma de hacer un calculo exacto. Commented el 15 jun. 2017 a las 20:56
1

var num = 9999
$("#myInput").keyup(function () {
  var that = $(this);
  if(that.val() > num) {
    that.css({
      "color": "red",
    });
  }
  else {
   that.css({
      "color": "black",
    });
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input id="myInput"/>

num es el valor maximo, si es mayor el texto cambia a rojo

0
1

Se le puede modificar cuantos digitos y con que color con 2 inputs que aparece arriba. Falta modificar que cuando le intercalas un numero al principio despues de escribir bastante, que el curso no se salte a lo ultimo, pero lo demas anda bien

Cuando lo estaba haciendo me fije como estaba hecho el mismo editor de codigo de stack, y tiene algo que renderiza la barra vertical para que titile, voy probar siguiendo esa linea la idea de abajo de superponer divs. Me parece mucho mas limpio que estas cosas

La base del codigo son dos cosas, por un lado, aplicar a un div esto, haciendolo editable

<div id="input" contenteditable="true" ></div>

y por otro lado esto, que maneja la posicion del cursor

function setCursorToEnd(ele) { var range = document.createRange(); var sel = window.getSelection(); range.setStart(ele, 1); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); ele.focus(); }

/////INPUTS/////////////////////////////////////////////////
//INGRESAR CUANDOS DIGITOS QUERES QUE SE COLOREEN AL INICIO
var digitosInciales=5
//INGRESAR DE QUE COLOR SE DEBERIAN PINTAR
var color="33ff33"
////////////////////////////////////////////////////////////








var input = document.getElementById("input")
input.addEventListener ("input", ()=>{
var [di,co]=document.getElementsByClassName("agregar")

if(!isNaN(di.value)&&co.value.length>0) 
{
digitosInciales=di.value

color=co.value

}


let lengthInput=input.innerText.length-1



if (lengthInput>digitosInciales-1){
let textoColor=colorearText(0,digitosInciales-1,color,input.innerText)
input.innerHTML=textoColor

if(lengthInput>=digitosInciales)setCursorToEnd(otros)

}

else if (lengthInput>=0){
let textoColor=colorearText(0,lengthInput,color,input.innerText)
input.innerHTML=textoColor
setCursorToEnd(input)
}




})
/////////////////////////////////////////////////////////////
function colorearText(indiceIzq,indiceDer,color,texto){

let txtAr=texto.split("")

txtAr[indiceIzq]=`<span id="cincoDigitos" style="color:#${color}">${txtAr[indiceIzq]}`
txtAr[indiceDer]=`${txtAr[indiceDer]}</span ><span  id="otros">`



return txtAr.join("")+"</span>"
}
//////////////////////////////////////////////////////////////
function setCursorToEnd(ele)
  {
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(ele, 1);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    ele.focus();
  }
/////////////////////////////////////////////////////////////



//Cuando queres intercalar un numero salta a lo ultimo, en vez de manejar la posicion con length para todo, abria que setearla con la mismo posicion o algo asi aca dejo un fragmento que capaz ayuda (es para sacar la posicion del curso)


/*/    document.getElementById("trigger").addEventListener("click", function(){
        var myElement = document.getElementById('text-element');
        var startPosition = myElement.selectionStart;
        var endPosition = myElement.selectionEnd;
        
        // Comprueba si has seleccionado texto
        if(startPosition == endPosition){
            alert("La posición del cursor es (" + startPosition + "/" + myElement.value.length + ")");
        }else{
            alert("Texto seleccionado de ("+ startPosition +" to "+ endPosition + " of " + myElement.value.length + ")");
        }
    },false);*/





/*

                                                                                                                                                                                                                                   .         .
b.             8     ,o888888o.               8 8888        8          .8.          `8.`8888.      ,8'           8 888888888o   8 8888888888       ,o888888o.     8 888888888o.             `8.`8888.      ,8'                    ,8.       ,8.                   .8.             d888888o.
888o.          8  . 8888     `88.             8 8888        8         .888.          `8.`8888.    ,8'            8 8888    `88. 8 8888          . 8888     `88.   8 8888    `88.             `8.`8888.    ,8'                    ,888.     ,888.                 .888.          .`8888:' `88.
Y88888o.       8 ,8 8888       `8b            8 8888        8        :88888.          `8.`8888.  ,8'             8 8888     `88 8 8888         ,8 8888       `8b  8 8888     `88              `8.`8888.  ,8'                    .`8888.   .`8888.               :88888.         8.`8888.   Y8
.`Y888888o.    8 88 8888        `8b           8 8888        8       . `88888.          `8.`8888.,8'              8 8888     ,88 8 8888         88 8888        `8b 8 8888     ,88               `8.`8888.,8'                    ,8.`8888. ,8.`8888.             . `88888.        `8.`8888.
8o. `Y888888o. 8 88 8888         88           8 8888        8      .8. `88888.          `8.`88888'               8 8888.   ,88' 8 888888888888 88 8888         88 8 8888.   ,88'                `8.`88888'                    ,8'8.`8888,8^8.`8888.           .8. `88888.        `8.`8888.
8`Y8o. `Y88888o8 88 8888         88           8 8888        8     .8`8. `88888.          `8. 8888                8 888888888P'  8 8888         88 8888         88 8 888888888P'                  `8. 8888                    ,8' `8.`8888' `8.`8888.         .8`8. `88888.        `8.`8888.
8   `Y8o. `Y8888 88 8888        ,8P           8 8888888888888    .8' `8. `88888.          `8 8888                8 8888         8 8888         88 8888        ,8P 8 8888`8b                       `8 8888                   ,8'   `8.`88'   `8.`8888.       .8' `8. `88888.        `8.`8888.
8      `Y8o. `Y8 `8 8888       ,8P            8 8888        8   .8'   `8. `88888.          8 8888                8 8888         8 8888         `8 8888       ,8P  8 8888 `8b.                      8 8888                  ,8'     `8.`'     `8.`8888.     .8'   `8. `88888.   8b   `8.`8888.
8         `Y8o.`  ` 8888     ,88'             8 8888        8  .888888888. `88888.         8 8888                8 8888         8 8888          ` 8888     ,88'   8 8888   `8b.                    8 8888                 ,8'       `8        `8.`8888.   .888888888. `88888.  `8b.  ;8.`8888
8            `Yo     `8888888P'               8 8888        8 .8'       `8. `88888.        8 8888                8 8888         8 888888888888     `8888888P'     8 8888     `88.                  8 8888                ,8'         `         `8.`8888. .8'       `8. `88888.  `Y8888P ,88P'



b.             8 8 8888888888   8 8888888888            .8.             d888888o.   8888888 8888888888          .8.                    8 888888888o   8 888888888o.            .8.              ,o888888o.    8888888 8888888888  8 8888     ,o888888o.             .8.
888o.          8 8 8888         8 8888                 .888.          .`8888:' `88.       8 8888               .888.                   8 8888    `88. 8 8888    `88.          .888.            8888     `88.        8 8888        8 8888    8888     `88.          .888.
Y88888o.       8 8 8888         8 8888                :88888.         8.`8888.   Y8       8 8888              :88888.                  8 8888     `88 8 8888     `88         :88888.        ,8 8888       `8.       8 8888        8 8888 ,8 8888       `8.        :88888.
.`Y888888o.    8 8 8888         8 8888               . `88888.        `8.`8888.           8 8888             . `88888.                 8 8888     ,88 8 8888     ,88        . `88888.       88 8888                 8 8888        8 8888 88 8888                 . `88888.
8o. `Y888888o. 8 8 888888888888 8 888888888888      .8. `88888.        `8.`8888.          8 8888            .8. `88888.                8 8888.   ,88' 8 8888.   ,88'       .8. `88888.      88 8888                 8 8888        8 8888 88 8888                .8. `88888.
8`Y8o. `Y88888o8 8 8888         8 8888             .8`8. `88888.        `8.`8888.         8 8888           .8`8. `88888.               8 888888888P'  8 888888888P'       .8`8. `88888.     88 8888                 8 8888        8 8888 88 8888               .8`8. `88888.
8   `Y8o. `Y8888 8 8888         8 8888            .8' `8. `88888.        `8.`8888.        8 8888          .8' `8. `88888.              8 8888         8 8888`8b          .8' `8. `88888.    88 8888                 8 8888        8 8888 88 8888              .8' `8. `88888.
8      `Y8o. `Y8 8 8888         8 8888           .8'   `8. `88888.   8b   `8.`8888.       8 8888         .8'   `8. `88888.             8 8888         8 8888 `8b.       .8'   `8. `88888.   `8 8888       .8'       8 8888        8 8888 `8 8888       .8'   .8'   `8. `88888.
8         `Y8o.` 8 8888         8 8888          .888888888. `88888.  `8b.  ;8.`8888       8 8888        .888888888. `88888.            8 8888         8 8888   `8b.    .888888888. `88888.     8888     ,88'        8 8888        8 8888    8888     ,88'   .888888888. `88888.
8            `Yo 8 888888888888 8 8888         .8'       `8. `88888.  `Y8888P ,88P'       8 8888       .8'       `8. `88888.           8 8888         8 8888     `88. .8'       `8. `88888.     `8888888P'          8 8888        8 8888     `8888888P'    .8'       `8. `88888.



    ,o888888o.      8 8888      88 8 8888888888             8 888888888o   8 888888888o.   8 8888888888   `8.`888b           ,8' 8 8888888888   b.             8  8 8888 8 888888888o.             8 8888888888   8 888888888o.   8 888888888o.       ,o888888o.     8 888888888o.   8 8888888888      d888888o.
 . 8888     `88.    8 8888      88 8 8888                   8 8888    `88. 8 8888    `88.  8 8888          `8.`888b         ,8'  8 8888         888o.          8  8 8888 8 8888    `88.            8 8888         8 8888    `88.  8 8888    `88.   . 8888     `88.   8 8888    `88.  8 8888          .`8888:' `88.
,8 8888       `8b   8 8888      88 8 8888                   8 8888     `88 8 8888     `88  8 8888           `8.`888b       ,8'   8 8888         Y88888o.       8  8 8888 8 8888     `88            8 8888         8 8888     `88  8 8888     `88  ,8 8888       `8b  8 8888     `88  8 8888          8.`8888.   Y8
88 8888        `8b  8 8888      88 8 8888                   8 8888     ,88 8 8888     ,88  8 8888            `8.`888b     ,8'    8 8888         .`Y888888o.    8  8 8888 8 8888     ,88            8 8888         8 8888     ,88  8 8888     ,88  88 8888        `8b 8 8888     ,88  8 8888          `8.`8888.
88 8888         88  8 8888      88 8 888888888888           8 8888.   ,88' 8 8888.   ,88'  8 888888888888     `8.`888b   ,8'     8 888888888888 8o. `Y888888o. 8  8 8888 8 8888.   ,88'            8 888888888888 8 8888.   ,88'  8 8888.   ,88'  88 8888         88 8 8888.   ,88'  8 888888888888   `8.`8888.
88 8888     `8. 88  8 8888      88 8 8888                   8 888888888P'  8 888888888P'   8 8888              `8.`888b ,8'      8 8888         8`Y8o. `Y88888o8  8 8888 8 888888888P'             8 8888         8 888888888P'   8 888888888P'   88 8888         88 8 888888888P'   8 8888            `8.`8888.
88 8888      `8,8P  8 8888      88 8 8888                   8 8888         8 8888`8b       8 8888               `8.`888b8'       8 8888         8   `Y8o. `Y8888  8 8888 8 8888`8b                 8 8888         8 8888`8b       8 8888`8b       88 8888        ,8P 8 8888`8b       8 8888             `8.`8888.
`8 8888       ;8P   ` 8888     ,8P 8 8888                   8 8888         8 8888 `8b.     8 8888                `8.`888'        8 8888         8      `Y8o. `Y8  8 8888 8 8888 `8b.               8 8888         8 8888 `8b.     8 8888 `8b.     `8 8888       ,8P  8 8888 `8b.     8 8888         8b   `8.`8888.
 ` 8888     ,88'8.    8888   ,d8P  8 8888                   8 8888         8 8888   `8b.   8 8888                 `8.`8'         8 8888         8         `Y8o.`  8 8888 8 8888   `8b.             8 8888         8 8888   `8b.   8 8888   `8b.    ` 8888     ,88'   8 8888   `8b.   8 8888         `8b.  ;8.`8888
    `8888888P'  `8.    `Y88888P'   8 888888888888           8 8888         8 8888     `88. 8 888888888888          `8.`          8 888888888888 8            `Yo  8 8888 8 8888     `88.           8 888888888888 8 8888     `88. 8 8888     `88.     `8888888P'     8 8888     `88. 8 888888888888  `Y8888P ,88P'



                                                                                                                                                                                                                                     .         .
    ,o888888o.      8 8888      88 8 8888888888             8 888888888o.      8 8888888888      d888888o.       ,o888888o.        ,o888888o.     b.             8     ,o888888o.         ,o888888o.    8 8888888888            ,8.       ,8.              ,o888888o.        d888888o.
 . 8888     `88.    8 8888      88 8 8888                   8 8888    `^888.   8 8888          .`8888:' `88.    8888     `88.   . 8888     `88.   888o.          8  . 8888     `88.      8888     `88.  8 8888                 ,888.     ,888.          . 8888     `88.    .`8888:' `88.
,8 8888       `8b   8 8888      88 8 8888                   8 8888        `88. 8 8888          8.`8888.   Y8 ,8 8888       `8. ,8 8888       `8b  Y88888o.       8 ,8 8888       `8b  ,8 8888       `8. 8 8888                .`8888.   .`8888.        ,8 8888       `8b   8.`8888.   Y8
88 8888        `8b  8 8888      88 8 8888                   8 8888         `88 8 8888          `8.`8888.     88 8888           88 8888        `8b .`Y888888o.    8 88 8888        `8b 88 8888           8 8888               ,8.`8888. ,8.`8888.       88 8888        `8b  `8.`8888.
88 8888         88  8 8888      88 8 888888888888           8 8888          88 8 888888888888   `8.`8888.    88 8888           88 8888         88 8o. `Y888888o. 8 88 8888         88 88 8888           8 888888888888      ,8'8.`8888,8^8.`8888.      88 8888         88   `8.`8888.
88 8888     `8. 88  8 8888      88 8 8888                   8 8888          88 8 8888            `8.`8888.   88 8888           88 8888         88 8`Y8o. `Y88888o8 88 8888         88 88 8888           8 8888             ,8' `8.`8888' `8.`8888.     88 8888         88    `8.`8888.
88 8888      `8,8P  8 8888      88 8 8888                   8 8888         ,88 8 8888             `8.`8888.  88 8888           88 8888        ,8P 8   `Y8o. `Y8888 88 8888        ,8P 88 8888           8 8888            ,8'   `8.`88'   `8.`8888.    88 8888        ,8P     `8.`8888.
`8 8888       ;8P   ` 8888     ,8P 8 8888                   8 8888        ,88' 8 8888         8b   `8.`8888. `8 8888       .8' `8 8888       ,8P  8      `Y8o. `Y8 `8 8888       ,8P  `8 8888       .8' 8 8888           ,8'     `8.`'     `8.`8888.   `8 8888       ,8P  8b   `8.`8888.
 ` 8888     ,88'8.    8888   ,d8P  8 8888                   8 8888    ,o88P'   8 8888         `8b.  ;8.`8888    8888     ,88'   ` 8888     ,88'   8         `Y8o.`  ` 8888     ,88'      8888     ,88'  8 8888          ,8'       `8        `8.`8888.   ` 8888     ,88'   `8b.  ;8.`8888
    `8888888P'  `8.    `Y88888P'   8 888888888888           8 888888888P'      8 888888888888  `Y8888P ,88P'     `8888888P'        `8888888P'     8            `Yo     `8888888P'         `8888888P'    8 888888888888 ,8'         `         `8.`8888.     `8888888P'      `Y8888P ,88P'


*/
#input{

background-color:#eef;
border-style:solid;
border-radius: 10px;
border-width: 1px;
outline:none;
padding:3px
}


.agregar{

background-color:#eef;
border-style:solid;
border-radius: 10px;
border-width: 1px;
outline:none;
padding:3px;
margin-bottom:5px;
width: 160px;
}
<input placeholder= "Cantidad de digitos ej--> 3" class="agregar" contenteditable="true" ></input>

<input placeholder="    Color ej--> F0FAF3 " class="agregar" contenteditable="true" ></input>

<div id="input" contenteditable="true" ></div>

0

Hace poco arranque con css y etc. La respuesta con mas votos la verdad es una genialidad pero achancha mucho la escritura. Se me ocurrio hacer dos elementos superpuestos. Un input por abajo con el que el usuario pueda interactuar PERO NO PUEDA VERLO. Y un div por arriba (superpuesto perfectamente con el anterior) que el usuario PODRA VERLO PERO NO PODRA INTERACTUAR.

Entonces lo que escribis en el input de abajo lo pasa a texto coloreado a un div común y ya.

  • Se me ocurrió hace poco, pero no probé a ver que onda
  • Está el tema de "emular" el titilado y posicionamiento de la barra vertical del cursor
  • Idem con el resaltado de texto
  • No se como hacer un div "invisible a la interaccion"

2
  • Es una muy buena solución. Creo que si pudieses editar la respuesta agregando un ejemplo de código quedaría perfecta. Para lo que mencionás como complicado (titilado y selección), creo que te puede ayudar mucho usar contenteditable
    – Pollo
    Commented el 6 may. 2021 a las 5:37
  • Gracias! Cuando arme algo lo subo Commented el 6 may. 2021 a las 5:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.