在 div 中显示输入文本的可重用函数答案

【问题标题】：Reusable function to display input text in div在 div 中显示输入文本的可重用函数
【发布时间】：2021-11-21 14:33:38
【问题描述】：

我有一个函数可以在 div 中显示文本，因为它输入到输入中。现在它只是检查每个 ID 去获取值并显示文本。

我想让这个函数可重用，这样我就可以将不同的输入与不同的 div 匹配，而无需为每种情况编写唯一的函数。

这是一个使用单个输入和 div 的示例：

<body>

  <input type='text' name='name' id='inputBox'>
  <div id='displayBox'></div>

  <script type="text/javascript">
    var displayText = document.getElementById('inputBox');
    displayText.onkeyup = function() {
      document.getElementById('displayBox').innerHTML = inputBox.value;
    }
  </script>
</body>

并且我希望能够通过可重用功能对不同的独特输入和 div 集重复此操作。

<body>

  <!-- First set -->
  <input type='text' name='name' id='inputBox'>
  <div id='displayBox'></div>

  <!-- Second set -->
  <input type='text' name='name' id='inputBox'>
  <div id='displayBox'></div>

  <!-- etc... -->

  <script type="text/javascript">
    var displayText = document.getElementById('inputBox');
    displayText.onkeyup = function() {
      document.getElementById('displayBox').innerHTML = inputBox.value;
    }
  </script>
</body>

【问题讨论】：

标签： javascript html function reusability onkeyup

【解决方案1】：

您可以使用以下方法创建此功能：

function listener(target){
  return function(e){target.innerHTML = e.target.value};
}

function init(){
  var elems = document.querySelectorAll("input[data-keyuptarget]");
  for(var elem of elems){
    var target = document.getElementById(elem.getAttribute('data-keyuptarget'));
    if (target) elem.onkeyup = listener(target);
   }
 }

init();

在 html 中只使用

  <input type='text' name='name' data-keyuptarget="displayBox1">
  <div id='displayBox1'></div>


  <input type='text' name='name' data-keyuptarget="displayBox2">
  <div id='displayBox2'></div>

JS斌：https://jsbin.com/piwiyapohe/edit?html,output

【讨论】：

【解决方案2】：

如果您将每个“集合”包装在一个容器中，并将您的 id 替换为类，您可以为每个输入添加侦听器以监视更改、查找父容器、查找显示框并更新其文本内容。

// Get all of the inputs
const displayText = document.querySelectorAll('.inputBox');

// Attach listeners to all of them
displayText.forEach(input => {
  input.addEventListener('keyup', handleChange, false);
});

function handleChange() {

  // Find the closest div ancestor element (the container)
  const parent = this.closest('div');

  // Then locate the display box and update the text content
  parent.querySelector('.displaybox').textContent = this.value;
}

.container { margin-bottom: 1em; }
.displaybox { margin-top: 0.2em; height: 1.3em; width: 300px; border: 1px solid black; }

<div class="container">
  <input type="text" name="name" class="inputBox" placeholder="Type here">
  <div class="displaybox"></div>
</div>
<div class="container">
  <input type="text" name="age" class="inputBox" placeholder="Type here">
  <div class="displaybox"></div>
</div>
<div class="container">
  <input type="text" name="location" class="inputBox" placeholder="Type here">
  <div class="displaybox"></div>
</div>

【讨论】：

【解决方案3】：

看来你需要获取每个输入框和每个输出框的ID？

function showTypedInput(inputID, outputID) {
    var inputBox = document.getElementById(inputID);
    var outputBox = document.getElementById(outputID);
    inputBox.onkeyup = function(){
        outputBox.innerHTML = inputBox.value;
    };
}

那你只是重复使用这个？ showTypedInput("myInputBox", "myOutputBox");

【讨论】：