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

Question

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

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/

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

祝你好运:)

Answer 2

为我使用的 radio/checkbox 字段保留标签：

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

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

placeholder text in form breaks when add radio buttons

javascript

jquery

placeholder