使用 Javascript 动态更改 HTML5 输入元素的“占位符”属性
Posted
技术标签:
【中文标题】使用 Javascript 动态更改 HTML5 输入元素的“占位符”属性【英文标题】:Changing the "placeholder" attribute of HTML5 input elements dynamically using Javascript 【发布时间】:2011-04-24 13:53:10 【问题描述】:我正在尝试使用 jQuery 动态更新文本字段的 html5 placeholder
属性。
$("textarea").attr("placeholder", "New placeholder text");
从 Firebug 中,我可以观察到 placeholder
属性确实在发生变化。但在渲染的textarea
元素中,它保持不变。有什么建议吗?
【问题讨论】:
其他浏览器的行为如何? 【参考方案1】:试试这个:
$('#inputTextID').attr("placeholder","placeholder text");
【讨论】:
【参考方案2】:我认为你必须这样做:
$("textarea").val('');
$("textarea").attr("placeholder", "New placeholder text");
【讨论】:
对于未来的访问者来说,首先清除价值就是这样做的。铬 40.0.2214.93 有没有办法从 var 中设置占位符文本?例如:var $text = 'abc'; $('#id').attr("placeholder", $text);
【参考方案3】:
如果您使用的是 Firebug,我可以假设您使用的是 Firefox,而 Firefox 尚不支持输入字段本身的placeholder
属性。
Placeholder feature detection
我刚刚在 Chrome for Mac 上尝试过,它支持 textareas 上的占位符文本(并通过 javascript 进行更改)
2015 更新:有时我会因为这个答案而获得声誉,所以我想澄清一下,这被认为是正确的,因为当时 Firefox 3.6 不支持占位符属性。第 4 版随后添加了支持(“修复了问题”并不公平),因此 OP 的代码从那时起按预期工作。
【讨论】:
【参考方案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
。
【讨论】:
【参考方案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");
【讨论】:
【参考方案6】:HTML:
<input type="text" placeholder="entername" id="fname"/>
JS:
$("#fname").attr("placeholder", "New placeholder text");
【讨论】:
以上是关于使用 Javascript 动态更改 HTML5 输入元素的“占位符”属性的主要内容,如果未能解决你的问题,请参考以下文章
javascript + html5音频播放器cors不播放动态源
有没有一种不用图像就可以用 HTML5 画布和 javascript 动态绘制云的好方法?