使用 PURE JS 添加基于输入标签的占位符属性 - 否 jQuery

Question

我需要获取每个元素的标签并将其作为占位符属性应用于输入，虽然我已经完成了大约一半但似乎无法仅获取元素的文本以添加属性

请注意，我无法在任何方面使用 jQuery

JS:

var elements = document.querySelectorAll('p.form-field');
Array.prototype.forEach.call(elements, function(el, i){
  var chel = el.querySelectorAll('.field-label');
  console.log(chel.textContent);
});

HTML:

<form accept-charset="UTF-8" method="post" action="nottelling" class="form" id="pardot-form">
    <p class="form-field first_name pd-text required ">
        <label class="field-label" for="25492_61334pi_25492_61334">First Name</label>
        <input type="text" name="25492_61334pi_25492_61334" id="25492_61334pi_25492_61334" value="" class="text" size="30" maxlength="32" onchange="" /> 
    </p>

    <div id="error_for_25492_61334pi_25492_61334" style="display:none"></div>

    <p class="form-field last_name pd-text required ">
        <label class="field-label" for="25492_61336pi_25492_61336">Last Name</label>
        <input type="text" name="25492_61336pi_25492_61336" id="25492_61336pi_25492_61336" value="" class="text" size="30" maxlength="32" onchange="" /> 
    </p>

    <div id="error_for_25492_61336pi_25492_61336" style="display:none"></div>

    <p class="form-field email pd-text required ">
        <label class="field-label" for="25492_61338pi_25492_61338">Email</label>
        <input type="text" name="25492_61338pi_25492_61338" id="25492_61338pi_25492_61338" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 25492, 61338, 12545572);" /> 
    </p>

    <div id="error_for_25492_61338pi_25492_61338" style="display:none"></div>

    <p class="form-field company pd-text required ">
        <label class="field-label" for="25492_61340pi_25492_61340">Company</label>
        <input type="text" name="25492_61340pi_25492_61340" id="25492_61340pi_25492_61340" value="" class="text" size="30" maxlength="100" onchange="" /> 
    </p>

    <div id="error_for_25492_61340pi_25492_61340" style="display:none"></div>

    <p style="position:absolute; width:190px; left:-9999px; top: -9999px;visibility:hidden;">
        <label for="pi_extra_field">Comments</label>
        <input type="text" name="pi_extra_field" id="pi_extra_field" /> 
    </p>

    <input name="_utf8" type="hidden" value="&#9731;" />

    <p class="submit">
        <input type="submit" accesskey="s" value="Send Message" /> 
    </p>

    <input type="hidden" name="hiddenDependentFields" id="hiddenDependentFields" value="" />
</form>

Answer 1

var labels = document.querySelectorAll("label");
var i = labels.length;
while (i--) {
  var label = labels.item(i);
  var text = label.textContent;
  label.parentNode.classList.contains("required") && (text += "*");
  label.nextElementSibling.setAttribute("placeholder", text);
}

Answer 2

你很接近：问题只是你试图使用第二个 querySelectorAll 返回的对象，就好像它是一个元素一样。它 returns 是一个集合，即使只有一个匹配元素。如果您知道只有一个元素匹配它，只需用零对其进行索引即可。如果您知道每个 p 元素中只有一个这样的元素，您可以使用相同的方式访问 input 元素。所以基本代码可以如下：

var elements = document.querySelectorAll('p.form-field');
Array.prototype.forEach.call(elements, function(el, i){
  el.querySelectorAll('input')[0].placeholder =
    el.querySelectorAll('.field-label')[0].textContent;
});

有几种可能的方法，具体取决于您对源代码所做的假设。

注意：将标签文本复制为占位符是无用且令人不安的。用占位符替换标签文本不利于可访问性，并且在 HTML5 规范中不受欢迎。但也许你正在做的操作有一些不同的目的。

Answer 3

虽然前面的答案有效，但我建议采用更简单的方法，例如：

function placeholderLabels() {
  // get <input> elements that are in a <p> and follow a <label>:
  var inputs = document.querySelectorAll('p label + input');

  // iterate over those <input> elements:
  Array.prototype.forEach.call(inputs, function(input) {
  // input is the current <input> from the NodeList over which we're
  // iterating, here we set its placeholder property to either:
  // the textContent of the first <label> associated with the <input>
  // or to an empty string, if there's no associated <label>:
    input.placeholder = input.labels.length ? input.labels[0].textContent.trim() : '';
  });
}

placeholderLabels();

function placeholderLabels() {
  var inputs = document.querySelectorAll('p label + input');
  Array.prototype.forEach.call(inputs, function(input) {
    input.placeholder = input.labels.length ? input.labels[0].textContent.trim() : '';
  });
}

placeholderLabels();

label {
  display: inline-block;
  width: 7em;
}
p.required label::after {
  content: '*';
}

<form accept-charset="UTF-8" method="post" action="nottelling" class="form" id="pardot-form">
  <p class="form-field first_name pd-text required ">
    <label class="field-label" for="25492_61334pi_25492_61334">First Name</label>
    <input type="text" name="25492_61334pi_25492_61334" id="25492_61334pi_25492_61334" value="" class="text" size="30" maxlength="32" onchange="" />
  </p>

  <div id="error_for_25492_61334pi_25492_61334" style="display:none"></div>

  <p class="form-field last_name pd-text required ">
    <label class="field-label" for="25492_61336pi_25492_61336">Last Name</label>
    <input type="text" name="25492_61336pi_25492_61336" id="25492_61336pi_25492_61336" value="" class="text" size="30" maxlength="32" onchange="" />
  </p>

  <div id="error_for_25492_61336pi_25492_61336" style="display:none"></div>

  <p class="form-field email pd-text required ">
    <label class="field-label" for="25492_61338pi_25492_61338">Email</label>
    <input type="text" name="25492_61338pi_25492_61338" id="25492_61338pi_25492_61338" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 25492, 61338, 12545572);" />
  </p>

  <div id="error_for_25492_61338pi_25492_61338" style="display:none"></div>

  <p class="form-field company pd-text required ">
    <label class="field-label" for="25492_61340pi_25492_61340">Company</label>
    <input type="text" name="25492_61340pi_25492_61340" id="25492_61340pi_25492_61340" value="" class="text" size="30" maxlength="100" onchange="" />
  </p>

  <div id="error_for_25492_61340pi_25492_61340" style="display:none"></div>

  <p style="position:absolute; width:190px; left:-9999px; top: -9999px;visibility:hidden;">
    <label for="pi_extra_field">Comments</label>
    <input type="text" name="pi_extra_field" id="pi_extra_field" />
  </p>

  <input name="_utf8" type="hidden" value="&#9731;" />

  <p class="submit">
    <input type="submit" accesskey="s" value="Send Message" />
  </p>

  <input type="hidden" name="hiddenDependentFields" id="hiddenDependentFields" value="" />
</form>

然而，在这一点上值得重申的是，这不是一个好的用户界面；占位符不应替换 <label>，如果使用，应提供一些关于 <input> 期望的指导，例如格式或期望值。

使用 PURE JS 添加基于输入标签的占位符属性 - 否 jQuery

Adding Placeholder attributes base on input label with PURE JS - no jQuery

html

javascript

forms

placeholder