在JavaScript中用前面的标签填充文本框

Fill textbox with preceding label in JavaScript

本文关键字：标签 填充 文本 前面 JavaScript      更新时间：2023-09-26

我试图用JavaScript制作一个表单填充器，它将从下面的代码中获取InputLabel字段的值，并将该值放入InputAnswer字段。

<div id="pi58741row2" class="regComponentRow">
    <div id="piInputOption221812" class="regInputItem">
        <div id="piInputLabel221812" class="inputLabel">
            <font color="#C65E09">*</font>First Name
        </div><div id="piInputAnswer221812" class="inputAnswer">
            <input name="firstName" type="text" value="This is a test" maxlength="80" id="firstName" style="width:150px;">
        </div>
    </div>
</div>

我已经能够用下面的代码用我自己的文本填充字段，但该字段有时可能用于First Name以外的其他内容，所以我希望将标签放在字段中，而不是输入名称。

if (type == 'text') {
    if (!inp.value) {
        if (inp.name.indexOf('ame') != -1) {
            inp.value = 'First Name';
        }
    }
}

如果您稍微格式化一下HTML，就更容易看到如何做到这一点:

<div id="pi58741row2" class="regComponentRow">
    <div id="piInputOption221812" class="regInputItem">
        <div id="piInputLabel221812" class="inputLabel">
            <font color="#C65E09">*</font>First Name
        </div>
        <div id="piInputAnswer221812" class="inputAnswer">
            <input name="firstName" type="text" value="This is a test" maxlength="80" id="firstName" style="width:150px;">
        </div>
    </div>
</div>

现在我们可以很容易地看到标签和字段周围的div是兄弟姐妹，并且input在inputAnswerdiv内。因此，如果我们选择所有inputAnswer元素，我们可以从它们前面的inputLabel中获得文本，并将其应用于里面的input 。

Array.prototype.forEach.call(document.querySelectorAll(".inputAnswer"), function(answer) {
    var label = answer.previousElementSibling;
    var input = answer.querySelector("input");
    input.value = (label.innerText || label.textContent).trim();
});

生活例子:

Array.prototype.forEach.call(document.querySelectorAll(".inputAnswer"), function(answer) {
  var label = answer.previousElementSibling;
  var input = answer.querySelector("input");
  input.value = (label.innerText || label.textContent).trim();
});
<div id="pi58741row2" class="regComponentRow">
  <div id="piInputOption221812" class="regInputItem">
    <div id="piInputLabel221812" class="inputLabel">
      <font color="#C65E09">*</font>First Name
    </div>
    <div id="piInputAnswer221812" class="inputAnswer">
      <input name="firstName" type="text" value="This is a test" maxlength="80" id="firstName" style="width:150px;">
    </div>
  </div>
</div>
<div id="pi58741row3" class="regComponentRow">
  <div id="piInputOption221813" class="regInputItem">
    <div id="piInputLabel221813" class="inputLabel">
      <font color="#C65E09">*</font>Last Name
    </div>
    <div id="piInputAnswer221813" class="inputAnswer">
      <input name="firstName" type="text" value="This is a test" maxlength="80" id="lastName" style="width:150px;">
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

关于这一点有几点注意:

  • 正如你所看到的，我们使用forEach从数组，即使document.querySelectorAll的返回值不是一个数组。它是类似数组的，这就足够了。像IE8这样的旧浏览器可能需要为forEach添加shim/polyfill。
  • querySelectorAll和querySelector被所有现代浏览器支持，也包括IE8。我们允许浏览器使用innerText或textContent的可能性。它们很相似，但略有不同，有些浏览器支持其中一种，有些浏览器支持另一种，有些浏览器甚至两者都支持。对于我们正在做的事情，这并不重要，所以我们只是通过奇怪的强大的||操作符来尝试这两种操作。
  • 一些浏览器可能没有String#trim(我在最后使用)。不过，它可以很容易地上光/填充。

或者如果你正在使用jQuery，只是不记得标记:

$(".inputAnswer").each(function() {
    var $this = $(this);
    var $label = $this.prev(".inputLabel"); // Only if adjacent
    var $input = $this.find("input");
    $input.val($.trim($label.text()));
});

在浏览器的现代特性(querySelectorAll, forEach, String#trim)下，在这种情况下，它并没有给我们带来太多的好处。

旁注:font标签已经被弃用很多年了，你并没有把它用于它最初对任何人的意义。建议使用span元素:

<span style="color: #C65E09">*</span>

或者更好:

<span class="flag">*</span>

…并在CSS中着色。

旁注2:标记输入的正确方法是使用label元素，将它们与包含(将input 放在 label内)或label上的for属性关联到input上的id。(如果你想要你的label是一个块，像div，你可以用CSS。)您可以考虑这样做:

<div id="pi58741row2" class="regComponentRow">
    <div id="piInputOption221812" class="regInputItem">
        <label for="firstName">
            <span class="flag">*</span>First Name
        </label>
        <div id="piInputAnswer221812" class="inputAnswer">
            <input name="firstName" type="text" value="This is a test" maxlength="80" id="firstName" style="width:150px;">
        </div>
    </div>
</div>
相关文章：