时间戳

首页 > 解决方案 > JS - 更改特定文本输入字段的值（类有几个输入元素）

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

问题描述

我有这个 JS 功能：

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

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

<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 值的输入字段（一次只有一个可见，其他设置为显示：无）？

谢谢你

如何选择活动输入字段

标签： javascriptinput

解决方案

第一步是避免使用内联处理程序，因为它们具有糟糕的范围规则并且存在转义问题 -addEventListener现在最好使用。

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

单击 div 中的某些内容时special_chars，转到上部 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;
    }
  });
}

推荐阅读