使用PURE JS添加基于输入标签的Placeholder属性 - 没有jQuery

问题描述 投票：0回答：3

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

请注意，我无法在任何方面使用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>
javascript html html5 forms placeholder
3个回答
4
投票
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);
}
2
投票

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

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>期望的一些指导，例如格式或预期值。

0
投票

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

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规范中的可访问性和frowened是不利的。但也许您正在进行的操作有一些不同的目的。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.