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

StackOverflow https://stackoverflow.com/questions/3919369

  •  29-09-2019
  •  | 
  •  

题

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

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

从火器中，我可以观察到 placeholder 属性确实在变化。但是在渲染中 textarea 元素，它保持不变。有什么建议么？

有帮助吗？

解决方案

如果您使用的是Firebug，我可以假设您正在使用Firefox，而Firefox尚未支持 placeholder 输入字段本身中的属性。

占位符特征检测

我只是在Chrome上尝试了Mac，它支持Textareas上的占位符文本（并通过JavaScript进行更改）

2015年更新：有时我会因这个答案而闻名，因此我想澄清一下这是正确的，因为Firefox 3.6当时不支持占位符属性。然后，版本4添加了支持（“解决问题”是不公平的），因此从那以后的OP代码正常工作。

其他提示

试试这个 ： 

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

我认为您必须这样做：

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

<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.

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

html：

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

JS：

$("#fname").attr("placeholder", "New placeholder text");
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top