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

时间:2010-10-12 21:56:46

标签: jquery html5 placeholder

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

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

从Firebug,我可以发现placeholder属性确实在变化。但是在渲染的textarea元素中,它保持不变。有什么建议吗?

6 个答案:

答案 0 :(得分:51)

试试这个:

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

答案 1 :(得分:18)

我认为你必须这样做:

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

答案 2 :(得分:15)

如果您使用的是Firebug,我可以假设您使用的是Firefox,而Firefox在输入字段中还不支持placeholder属性。

Placeholder feature detection

我刚尝试使用Chrome for Mac,它支持textareas上的占位符文本(以及通过javascript进行更改)

2015年更新:有时我获得了这个答案的声誉,所以我想澄清这被认为是正确的,因为当时Firefox 3.6不支持占位符属性。第4版然后添加支持(“修复问题”不公平)所以OP的代码从那时开始按预期工作。

答案 3 :(得分:3)

<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

答案 4 :(得分:2)

使用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");
}
}

答案 5 :(得分:-1)

HTML:

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

JS:

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