1

Gracias de antemano por sus respuestas. Estoy realizando una function Javascript que toma el valor de una textarea y lo refleja en inputs. Si, no un input si no varios. El proposito de esta funcion es que cuando comience a escribir en la textarea, en el primer input comienza a aparecer el texto. Ahora una vez que la cadena de texto a abarcado el ancho del primer input, el texto continua en el segundo input y asi sucesivamente. Ejemplo, si en la textarea escribo "Hola me llamo juan perez y vivo en un pais", en el primer input si su ancho le permite mostrar solo "Hola me llamo juan perez y v" el segundo input debe mostrar "ivo en un pais". Mi codigo cumple esta condicion si escribes letra por letra el texto, pero no funciona si pegas un texto.

function textarea(id,clas) {
    // body...
    r=[]
    var id_txt= id;
    var clase= clas;
    var b= document.getElementById(id_txt);
    var c= b.value;
    var f=document.getElementsByClassName("txt")[0]
    document.getElementsByClassName(clase)[2].innerHTML=c;
    var g=document.getElementsByClassName(clase)[2].offsetWidth;
    var p=document.getElementsByClassName(clase)[0].offsetWidth;
    for(i=0;i<b.value.length;i++){
        tx=""
        tx=c[i]
        console.log(tx)
    }
    if(g>p-5&&g<p+10){
        var t=document.getElementsByClassName(clase)[0].value;
        r=[t.length];
         d= r[0]
        return d
        
    }
    if(g>p-5){
        var t=document.getElementsByClassName(clase)[0].value;
        
        return d
        
    }
    return undefined
}

document.getElementById("app").addEventListener("keyup",function(){
    aa()
})

function aa(){
    h=textarea("app","txt");
    var a=document.getElementById("app").value
    for(i=0;i<a.length;i++)
    if(h===undefined){
        p=a.length+1
    }else{
        p=h
    }
    document.getElementsByClassName("txt")[0].value= a.substring(0,h);
    document.getElementsByClassName("txt")[1].value= a.substring(p);
    console.log(h)
}
input{
        font-family: arial;
        font-size: 12px;
    }
  
  textarea{
  width:100%;
  }
  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hi</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <style type="text/css">
        input, textarea, div{
            color: white;
        }
        #gg{
            width: max-content;
        }
    </style>
</head>
<body class="bg-dark">

<div class="container">
    <div class="row mt-2">
        <div class="col-3">
            <textarea name="" id="app" cols="30" rows="10" class="bg-dark"></textarea>
        </div>
        <div class="col-2">
            <input type="text" class="txt mb-3 bg-dark">
            <input type="text" class="txt bg-dark">
            <div class="txt" id="gg">hello</div>
        </div>
    </div>
</div>

</body>
</html>

La solucion que busco es: 1- Hacer que funcione la funcion cuando un usuario pega el texto. 2- Hacer que esta funcion pueda trabajar en un numero indefinidos de input. Actualmente funciona con dos input, pero como hago que funcione con tres inputs, cada input con diferentes tamaños. 3- Hacer el codigo mas efeciente.

Gracias.

1 respuesta 1

0

Para cuando uno pega el texto, tienes el evento onKeyDown ahi actualizas una variable que diga pego por ej: a true

var paste = false
<textarea type="text" onkeydown="myFunction()">

myFunction(e){
   paste = e.key === 'v'  && e.ctrlKey
}

El keydown se ejecuta antes de tu onchange de tu text area, Asi cuando llegue a tu onchange haces otro modo de update de tus inputs.

  <textarea type="text" onchange="myOnChange()">
     myOnChange(e){
         if(paste){
           //calcular el ancho del texto en un textarea
              //hacer un split.
          }else{
              //letra por letra
           }
       }
0

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.