javascript - 根据文本区域的值加入输入

问题描述

提前感谢您的回答。我正在制作一个 Javascript 函数，它采用 textarea 的值并将其反映在输入中。是的，如果不是多张票，就不是一张票。此功能的目的是当您开始在文本区域中输入时，文本开始出现在第一个条目中。现在，在文本字符串跨越第一个条目的宽度后，文本继续进入第二个条目，依此类推。例如，如果在文本区域中我写“你好，我的名字是 Juan Pérez，我住在一个国家”，那么在第一个条目中，如果它的宽度只允许显示“你好，我的名字是 Juan Pérez”，那么第二个条目应该显示“我住在一个国家”。如果您逐字输入文本，我的代码符合此条件，但如果您粘贴文本，则它不起作用。

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/bootstrap@5.0.0-beta3/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>

我正在寻找的解决方案是： 1- 在用户粘贴文本时使该功能起作用。2-使此功能在不定数量的输入上工作。目前它适用于两个输入，但我如何使它适用于三个输入，每个输入具有不同的大小。3-使代码更高效。

谢谢。

标签： javascripthtml

javascript - 根据文本区域的值加入输入

问题描述

解决方案

推荐阅读