JS -更改特定文本的值-输入字段(类有几个输入元素)

Question

我有这个JS函数：

 function insert(i) {
      let elem = document.querySelector('.input_user');
      let old = elem.value;
      elem.value = old + i;
    };

我想让用户在输入字段中添加特殊字符。问题是有几个输入字段具有相同的类，因为表单是由php循环生成的。因此，它将始终将字符放在生成的第一个输入字段中。

<form action="ergebnisse.php" method="post">
          <?php
          while($row = $abfrage->fetch_assoc()) { ?>
            <div class="abfragefeld grid-8">
              <p class="vokabel"><?php echo $row["art_de"] . ' ' . $row["vok_de"]?></p>
              <p class="form"><?php echo $row["form"] ?></p>
              <p id="beispiel"><?php echo $row["beispiel"] ?></p>
              <input type="hidden" value="<?php echo $row['id']?>" name="id[]">
              <select class="art_select" name="art_fr_ip[]">
                <option value="le">le</option>
                <option value="la">la</option>
                <option value="l'">l&apos;</option>
                <option value="les">les</option>
                <option value="Ils/Elles">Ils/Elles</option>
                <option value="">kein Artikel</option>
              </select>
              <input class="input_user" type="text" name="vok_fr_ip[]">
              <div class="special_chars">
                <a onclick="insert('Ç')" class="char">&Ccedil;</a>
                <a onclick="insert('ç')" class="char">&ccedil;</a>
              </div>
            </div>
            <?php
          }
        } else {
          echo "0 results";
        }?>
      </div>

      <div class="slide-nav left_nav">
        <a type="button" class="prev" onclick="plusSlides(-1)">&#8249;</a>
      </div>
      <div class="slide-nav right_nav">
        <a class="next" onclick="plusSlides(1)">&#8250;</a>
      </div>
      <div class="submit_abfrage">
        <input class="check" type="submit" value="Alle Antworten abschicken">
      </div>
    </form>

有没有办法告诉JS将字符串发送到活动输入字段或具有特定CSS值的字段(一次只有一个可见，其他设置为display: none)？

谢谢

​

​

Answer 1

第一步是避免内联处理程序，因为它们的作用域规则很糟糕，而且有逃逸的问题--现在最好使用addEventListener。

您想要插入的字符看起来与被单击的<a>的textContent相同，所以您可以使用它而不是将参数传递给insert。

单击special_chars div中的某项内容，转到上面的div，然后转到前一个同级目录以转到<input>，您可以为该行更改它。

document.querySelector('form').addEventListener('click', (e) => {
  if (!e.target.closest('.special_chars') || !e.target.matches('a')) return;
  // Then the click was on an `<a>` we're interested in:
  const charToInsert = e.target.textContent;
  const input = e.target.parentElement.previousElementSibling;
  input.value += charToInsert;
});

另一种选择是遍历所有.special_chars元素：

for (const container of document.querySelectorAll('.special_chars')) {
  container.addEventListener('click', (e) => {
    if (e.target.matches('a')) {
      container.previousElementSibling.value += e.target.textContent;
    }
  });
}

Answer 2

通常，表单输入将具有name属性。CSS选择器不必是类。有几种形式：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors在本例中，您要查找的是“属性选择器”

在不知道你想要哪一个的情况下，一般的模式是：

document.querySelector('input[name="field-name"]')