javascript - 使用 javascript 将占位符添加到多个输入字段(具有相同的类)

Question

我有一个 HTML 表单，里面有 4 个输入字段。所有这些输入字段都具有相同的类和 ID，唯一的区别是输入周围的“div”。

• 一个表单在标题中，另一个在内容中，在每个表单中，一个字段是用于登录的用户名字段，另一个用于注册。

  <div class=theheader>
  <h1> The Header</h1>
  
  <div class="fullform">
  
  <div class="container register">
    <div class="form_group  required">
      <input class="input_text" id="username_field"  name="username" size="30" value="" type="text">
    </div>
  </div>
  
  <div class="container login">
      <div class="form_group">
        <input class="input_text" id="username_field" name="username" size="30" type="text" >
      </div>
  </div>
  
  </div>
  </div>
  
  <div class=thecontent>
  <h1> Form Content</h1>
  
  <div class="fullform">
  
  <div class="container register">
    <div class="form_group  required">
      <input class="input_text" id="username_field"  name="username" size="30" value="" type="text">
    </div>
  </div>
  
  <div class="container login">
      <div class="form_group">
        <input class="input_text" id="username_field" name="username" size="30" type="text" >
      </div>
  </div>
  
  </div>
  </div>
  

这是它的外观示例:http://jsfiddle.net/M6R7K/78/ .

我需要在每个字段中添加一个占位符，但棘手的是，我无法直接访问此 HTML 代码，因为它是由第三方插件自动生成的。所以我只能使用现有的类和 id 添加 javascript 或 css。

所以我使用了 javascript :

document.getElementById("username_field").setAttribute("placeholder", "Username");

它确实在正确的字段中添加了正确的占位符。问题是，它只在找到的第一个字段中添加占位符，而不是所有字段。即使我添加了几行 javascript。

那么问题来了:如何在不触及 HTML 代码的情况下用占位符填充所有这些字段？ (使用 javascript 或其他任何东西)并且尽可能为每个字段设置不同的占位符？ (一个需要是“用户名和电子邮件”，另一个是“用户名”)。我们应该能够使用 div 的类，就像我们在 CSS 中所做的那样。但我无法弄清楚。

谢谢!

Answer 1

您的代码集占位符是其中之一。标准没有定义它们中的哪一个将获得占位符，因为标准强制您每页只能使用一次 ID。您需要为所有具有 input_text 类的元素设置占位符。您可以通过带有占位符和迭代字段的数组来完成:在每次迭代中，通过此代码从数组中设置第 i 个占位符

var placeholders = ["Username", "Email", "Phone", "Credit card"]
var elements = document.getElementsByClassName("input_text");
for (var i = 0; i < elements.length; i++) {
    elements[i].setAttribute("placeholder", placeholders[i]);
}

示例:http://jsfiddle.net/M6R7K/81/

最佳做法通常是在 HTML 中设置占位符。