使用 PURE JS 基于输入标签添加占位符属性 - 没有 jQuery
Adding Placeholder attributes base on input label with PURE JS - no jQuery
我需要获取每个元素的标签并将其作为占位符属性应用于输入,虽然我得到了大约一半,但似乎无法只获取元素的文本以添加属性
请注意,我不能在任何方面使用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="☃" />
<p class="submit">
<input type="submit" accesskey="s" value="Send Message" />
</p>
<input type="hidden" name="hiddenDependentFields" id="hiddenDependentFields" value="" />
</form>
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);
}
虽然前面的答案有效,但我建议采用更简单的方法,例如:
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="☃" />
<p class="submit">
<input type="submit" accesskey="s" value="Send Message" />
</p>
<input type="hidden" name="hiddenDependentFields" id="hiddenDependentFields" value="" />
</form>
然而,在这一点上值得重申的是,这不是一个好的用户界面;占位符不应该替换<label>
,如果使用,应该提供一些关于<input>
期望的指导,例如格式或期望值。
你很接近:问题只是你试图使用第二个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 规范中很糟糕。但也许你正在做的操作有一些不同的目的。
相关文章:
- 当用户在输入字段事件中输入内容时,为该字段事件添加动画占位符
- 如何将占位符属性添加到 CKEditor 的实例
- 角度 - 需要向选择下拉列表添加多个占位符
- 添加一些值,以便在用户更改该服务器时将其作为占位符输入并保留它
- 使用 PURE JS 基于输入标签添加占位符属性 - 没有 jQuery
- Javascript:如何修改我的代码以在主题发布后添加回消失的占位符
- 输入字段html5占位符没有'不要在javascript中添加值后就消失
- 如何在jQuery数据表上添加带有搜索图标的占位符文本
- 在角度中向{{}}添加占位符
- 将占位符添加到角度 {{}}
- 如何为可拖动项添加占位符
- 如何编写一行可以添加到showpic函数末尾的代码,该函数更新占位符元素上的alt属性
- 向LI添加占位符attr
- 在.hbs ember模板文件的占位符中添加图像
- Javascript -在自动完成结果的点击上添加永久占位符
- 如何在编辑器中动态添加占位符
- 将占位符添加到ng网格中
- 删除小屏幕/移动设备上的输入占位符,但在调整为桌面大小时再次添加它们
- 如何向 jQuery Tokeninput 添加占位符
- CSS是否有办法在光标和输入中的占位符文本之间添加空格?