纯html双向绑定_html 元素的文本双向绑定-CSDN博客

本文链接：https://blog.csdn.net/2302_79777012/article/details/136209050

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .box-right {
            width: 300px;
            height: 50px;
            position: relative;
            /* margin: 100px 200px; */
            margin-bottom: 10px;
            border: 1px solid black;
            font-size: 30px;
            display: none;
        }
        
        .box-right::after {
            content: "";
            width: 10px;
            height: 10px;
            position: absolute;
            top: 45px;
            right: 141px;
            /* border-top: 1px solid black; */
            background-color:white;
            border-right: 1px solid black;
            border-bottom: 1px solid black;
            transform: rotate(45deg);
            transition: all 0.6s;
        }
        .kobe{
             margin: 0;
             padding: 0;
             overflow: hidden;
        }
        .james{
             padding: 20px;
             overflow: hidden;
        }

    </style>
</head>
<body>
  <div class="kobe">
     <div class="james"> 
        <div class="box-right"></div>
        <div>
            <input type="text" class="input">
        </div>
      </div>
      <div style="margin: 100px;">
           <input type="text" class="input2">
    </div>
  </div> 
  <script>
     let input = document.querySelector('.input');
     
     let boxRight = document.querySelector('.box-right');
     let input2 = document.querySelector('.input2')

     input.addEventListener('keyup',function(e){
        //   显示
          boxRight.style.display = 'block';
          input.focus()
          boxRight.innerHTML = input.value
          input2.value = input.value   
          console.log(11111)
     })
     input2.addEventListener('keyup',function(e){
        //   显示
          boxRight.style.display = 'block';
          input2.focus()
          boxRight.innerHTML = input2.value
          input.value = input2.value   
          console.log(11111)
     })
  </script>
    
</body>
</html>