计算一个输入字段的长度，并使用Gravity Forms和Javascript将其打印到另一个字段中

Count length of one input field and print it in another with Gravity Forms and Javascript

本文关键字：字段 Javascript Gravity Forms 另一个 打印 一个 输入 计算      更新时间：2023-09-26

我正在为Wordpress使用Gravity Forms，我正试图找出如何计算用户在我的一个输入框中键入的字符长度，并将该数字打印到另一个相同形式的输入框中。我认为这可以用Javascript完成，但我是一个新手，这是我非常淡化的工作。只是为了让你看到我在努力做什么。

<!-- edited -->
 <form>
  <input name="input_10" id="input_1_10" type="text" value="" class="small" tabindex="1">
  <input name="input_2" id="input_1_2" type="text" value="" class="medium" tabindex="2">
  <div style="padding:10px 15px; font-family:sans-serif !important;">
     <p id="preview" style="text-align:center;font-size:22px;font-weight:bold;">Sample Text</p>
  </div>
</form>
<script>
    var bank = document.getElementById("input_1_2");
    var countNum = document.getElementById("input_1_10");
    bank.addEventListener("keyup", function(e) {
        countNum.value = bank.value.length;
    });
    document.getElementById("preview").innerHTML= countNum.value;


</script>

因此，用户将在#input_1_10中键入他们的"消息"，我需要一种方法来计算字符（最好不计算空格），并在用户提交表单之前将其打印到#input_1_2中。

**编辑：我也想知道如何将#input_1_2的值写入ID为#preview的段落中**

感谢您的关注；）

将eventListener添加到第一个输入。在这种情况下，每当用户按下并释放键时，输入的长度将显示在第二输入中。

<form>
    <input name="input_10" id="input_1_10" type="text" value="" class="small" tabindex="1">
    <input name="input_2" id="input_1_2" type="text" value="" class="medium" tabindex="2">
</form>
<script>
    var bank = document.getElementById("input_1_10");
    var countNum = document.getElementById("input_1_2");
    bank.addEventListener("keyup", function(e) {
        countNum.value = bank.value.length;
    });
</script>
相关文章：