使用Javascript动态更改HTML5输入元素的“占位符”属性

Question

我试图使用jQuery动态更新文本字段的HTML5 placeholder属性。

$("textarea").attr("placeholder", "New placeholder text"); 

从Firebug，我可以观察到placeholder属性确实在改变。但在呈现的textarea元素中，它保持不变。有什么建议么？

Answer 1

如果您使用的是Firebug，我可以假定您使用Firefox，并且Firefox在输入字段本身中尚不支持placeholder属性。

Placeholder feature detection

我只是想在Chrome的Mac，它支持对文本域占位符文本（和通过JavaScript改变）

2015年更新：有时我得到这个答案的声誉，所以我想澄清，这被接受为正确的，因为当时Firefox 3.6不支持占位符属性。然后第4版增加了支持（“解决问题”不太公平），因此OP的代码按照预期工作。

Answer 2

试试这个：

$('#inputTextID').attr("placeholder","placeholder text"); 

Answer 3

我认为你必须这样做：

$("textarea").val(''); 
$("textarea").attr("placeholder", "New placeholder text"); 

Answer 4

<label for="myname">Name *</label> 
<input type="text" name="myname" id="myname" title="Please enter your name" 
     pattern="[A-Za-z ]+, [A-Za-z ]+" 
     autofocus required placeholder="Last, First" /> 

然后，你要选择的占位符并替换为new text that you want to enter文本。

$("input[placeholder]").attr("placeholder", "This is new text"); 

这将取代Last, First文本This is new text。

Answer 5

工作示例使用JavaScript和jQuery http://jsfiddle.net/ogk2L14n/1/

<input type="text" id="textbox"> 
<select id="selection" onchange="changeplh()"> 
    <option>one</option> 
    <option>two</option> 
    <option>three</option> 
    </select> 

function changeplh(){ 
    debugger; 
var sel = document.getElementById("selection"); 
    var textbx = document.getElementById("textbox"); 
    var indexe = sel.selectedIndex; 

    if(indexe == 0) { 
    $("#textbox").attr("placeholder", "age"); 

} 
     if(indexe == 1) { 
    $("#textbox").attr("placeholder", "name"); 
} 
} 

Answer 6

HTML动态占位符：

<input type="text" placeholder="entername" id="fname"/> 

JS：

$("#fname").attr("placeholder", "New placeholder text");