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格式设置占位符。

Answer 2

首先，你不能对同一个元素使用相同的id。

第二：尝试使用有意义值作为输入名称属性。如果你无法触摸HTML，你总是可以使用forEach循环中的index参数，这可能是一个想法。另一个想法是寻找根元素以区分输入字段。

我试着为你做，正确地告诉你如何解决你的问题：

window.onload = function() {
  Array.prototype.slice.call(document.getElementsByClassName("input_text")).forEach(function(currentValue, index) {
    currentValue.setAttribute("placeholder", currentValue.getAttribute('name'));
  });
}

<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_field1"  name="username" size="30" value="" type="text">
            </div>
        </div>
        <div class="container login">
            <div class="form_group">
                <input class="input_text" id="username_field2" name="password" 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_field3"  name="email" size="30" value="" type="text">
            </div>
        </div>

        <div class="container login">
            <div class="form_group">
                <input class="input_text" id="username_field4" name="other" size="30" type="text" >
            </div>
        </div>
    </div>
</div>

Answer 3

我已经能够使用“attr”函数和Jquery框架找到解决方案。

这是我应用于每个输入的函数，以便创建一个唯一的占位符（第一个字段的示例）：

4.0.0+20160715232503

此代码允许检索每个输入字段的DIV CLASS，并应用自定义字段。

所以对我的例子来说，就是这样：

$(".theheader .register input").attr('placeholder', 'Username Header')

每个字段都有他自定义的占位符！

结果如下：https://jsfiddle.net/3ddo465n/9/

谢谢大家的贡献！

使用javascript

3 个答案: