Question

我目前正在处理一个html5项目，其中有许多input字段我想用textarea替换。

示例：

<input type="text" id="Questions" name="texte1"/>
<input type="text" id="Questions" name="texte2"/>
<input type="text" id="Questions" name="texte3"/>

我想更改200个输入：

<textarea id="Questions" name="texte1"></textarea> 
<textarea id="Questions" name="texte2"></textarea> 
<textarea id="Questions" name="texte3"></textarea>

但是我真的不能使用搜索和替换工具，因为每个输入的名称都不同。所以我想知道是否有人知道一种快速的方法来按文本区域替换我的所有输入而不用我的代码将名称一一更改。

Answer 1

您需要一个标准来告诉您哪些输入需要替换。它们有什么共同点？另请注意，每页中的id元素值不能超过一个，因此显示的HTML无效。

因此对于示例代码，我假设所有需要替换的输入都具有CSS类replace-me：

document.getElementById('replace').addEventListener('click', (e) => {
  const toReplace = [...document.querySelectorAll('.replace-me')]
  for (const input of toReplace) {
    const textarea = document.createElement('textarea')
    const parent = input.parentNode
    textarea.id = input.id
    textarea.name = input.name
    textarea.value = input.value
    parent.removeChild(input)
    parent.appendChild(textarea)
  }  
})

<div>
  <input class="replace-me" type="text" value="1" id="i1" name="foo1" />
  <input class="replace-me" type="text" value="2" id="i2" name="foo2" />
  <input class="replace-me" type="text" value="3" id="i3" name="foo3" />
  <input class="replace-me" type="text" value="4" id="i4" name="foo4" />
  <input class="replace-me" type="text" value="5" id="i5" name="foo5" />
</div>
<button type="button" id="replace">Click to replace</button>

如何用textarea字段替换输入

1 个答案: