當輸入包裹在div中時，從表單標籤創建html5佔位符

我使用Gravity Forms並需要使用標籤作爲佔位符文本。有幾個WordPress插件，但他們並不總是工作。我還發現了一個解決方案，它在Gravity Forms表單構建器中添加了一個佔位符字段，但我並不需要它。當輸入包裹在div中時，從表單標籤創建html5佔位符

我想要做的是使用jQuery來獲取標籤文本並將該文本指定爲輸入的佔位符屬性。我在這裏使用next（），但它只在輸入不包含在div中時才起作用，我明白了。重力形式不會以這種方式發揮作用。

這裏是我的代碼，你會看到的第一個字段輸入被包裹在一個div，因此，沒有得到一個佔位符

<!DOCTYPE html> 
<html> 
<head> 
    <title>Placeholder</title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
</head> 
<body> 
    <div class="form"> 
     <ul> 
      <li id="field_1" class="gfield"> 
       <label>First Name</label> 
       <div><input class="first" type="text" /></div> 
      </li> 
      <li id="field_2" class="gfield"> 
       <label>Last Name</label> 
       <input class="last" type="text" /> 
      </li> 
      <li id="field_3" class="gfield"> 
       <label>Email</label> 
       <input type="text" /> 
      </li> 
     </ul> 
    <input type="submit" value="Submit" /> 
    </div> 
</body> 
    <script> 
     $("label").each(function() { 
      var label = $(this); 
      var placeholder = label.text(); 
      label.next("input").attr("placeholder", placeholder).val("").focus().blur(); 
     }); 
    </script> 
</html>

JS小提琴：http://jsfiddle.net/jsoningram/ezohpxq6/

在此先感謝，

來源

2014-09-06 user1318520

如果每個li元素只有一個標籤和輸入，您可以使用.closest() method和.find() method一起做類似的事情：

$("label").each(function() { 
    var label = $(this); 
    var placeholder = label.text(); 
    label.closest(".gfield").find("input").attr("placeholder", placeholder).val("").focus().blur(); 
});

演示：http://jsfiddle.net/ezohpxq6/2/

（或者，如果您的標籤元素有一個for=""屬性引用您可以使用您的jQuery代碼相關的輸入，但是這將涉及到更改HTML。但它會使標籤「點擊」）

來源

2014-09-06 02:05:24 nnnnnn

當輸入包裹在div中時，從表單標籤創建html5佔位符

回答

相關問題