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.