添加单选按钮时表单中的占位符文本会中断答案

【问题标题】：placeholder text in form breaks when add radio buttons添加单选按钮时表单中的占位符文本会中断
【发布时间】：2017-04-30 03:31:24
【问题描述】：

我使用下面的脚本来使用占位符，但是当我添加单选按钮时，脚本会中断。缺少什么？

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 += " *");
  var nextElement = label.nextElementSibling;

  if (nextElement.tagName == 'SELECT') {
    nextElement.options[0].text = text;
   } else {
    nextElement.setAttribute("placeholder", text);
   }
  label.parentNode.removeChild(label);
}
var elements = document.querySelectorAll('.errors, .no-label');
Array.prototype.forEach.call(elements, function(el, i) {
  el.parentNode.removeChild(el);
});

这里是 jsfiddle：https://jsfiddle.net/katyhege/zdqLtmsn/

【问题讨论】：

标签： javascript jquery placeholder

【解决方案1】：

似乎当脚本中断时它显示 nextElement undefined，所以你可以检查一下。如果它适合您，请尝试一次，

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 += " *");
    var nextElement = label.nextElementSibling;

      // This is what I changed:
     if(nextElement){
       if (nextElement.tagName == 'SELECT') {
        nextElement.options[0].text = text;
       } else {
        nextElement.setAttribute("placeholder", text);
       }
     label.parentNode.removeChild(label);
     }
  }
var elements = document.querySelectorAll('.errors, .no-label');
Array.prototype.forEach.call(elements, function(el, i) {
el.parentNode.removeChild(el);
});

或者你可以再做一个解决方案，只需替换

var i = labels.length;

与

var i = labels.length-2;

您还可以通过更改 HTML 使其正常工作，这基本上会导致问题，您可以看到最后两个标签（用于单选按钮），您没有将输入（单选按钮）放在标签旁边但是你把它们放在标签之前，所以它找不到下一个兄弟。如果您将无线电输入写在标签旁边（就像您对其他输入所做的那样），那么它将正常工作。谢谢。

祝你好运:)

【讨论】：

这不是您的最佳答案吗？ ;)
一个问题：有没有办法只为单选按钮和复选框保留标签（不在示例中），但在其他所有内容中添加占位符？

【解决方案2】：

留下我使用的单选/复选框字段的标签：

var labels = document.querySelectorAll("p.pd-text label, p.pd-select label, p.pd-textarea label");

【讨论】：