使用 jQuery 更改占位符文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9232810/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change Placeholder Text using jQuery
提问by Krishh
I am using a jQuery placeholder plugin(https://github.com/danielstocks/jQuery-Placeholder). I need to change the placeholder text with the change in dropdown menu. But it is not changing. Here is the code:
我正在使用 jQuery 占位符插件（https://github.com/danielstocks/jQuery-Placeholder）。我需要通过下拉菜单中的更改来更改占位符文本。但它并没有改变。这是代码：
$(function () {
$('input[placeholder], textarea[placeholder]').placeholder();
$('#serMemdd').change(function () {
var k = $(this).val();
if (k == 1) {
$("#serMemtb").attr("placeholder", "Type a name (Lastname, Firstname)").placeholder();
}
else if (k == 2) {
$("#serMemtb").attr("placeholder", "Type an ID").placeholder();
}
else if (k == 3) {
$("#serMemtb").attr("placeholder", "Type a Location").placeholder();
}
});
});
My Html:
我的HTML：
<div class="filterbox">
<select name="ddselect" id="serMemdd">
<option value="1" selected="selected">Search by Name</option>
<option value="2">Search by ID</option>
<option value="3">Search by Location</option>
</select>
<input id="serMemtb" type="text" style="width: 490px" placeholder="Type a name (Lastname, Firstname)" />
<input id="seMemBut" type="button" value="Search" />
</div>
Can anyone figure this out?
任何人都可以弄清楚吗？
回答by Neshat Khan
$(document).ready(function(){
$('form').find("input[type=textarea], input[type=password], textarea").each(function(ev)
{
if(!$(this).val()) {
$(this).attr("placeholder", "Type your answer here");
}
});
});
Copy and paste this code in your js file, this will change all placeholder text from whole site.
将此代码复制并粘贴到您的 js 文件中，这将更改整个站点中的所有占位符文本。
回答by Creator
You can use following code to update a placeholder by id:
您可以使用以下代码按 id 更新占位符：
$("#serMemtb").attr("placeholder", "Type a Location").val("").focus().blur();
回答by Krish
simply you can use
简单地你可以使用
$("#yourtextboxid").attr("placeholder", "variable");
where, if variable is string then you can use like above, if it is variable replace it with the name like "variable" with out double quotes.
其中，如果变量是字符串，那么您可以像上面那样使用，如果是变量，则将其替换为“变量”之类的名称，不带双引号。
eg: $("#youtextboxid").attr("placeholder", variable);it will work.
例如：$("#youtextboxid").attr("placeholder", variable);它会起作用。
回答by ori
The plugin doesn't look very robust. If you call .placeholder()again, it creates a new Placeholderinstance while events are still bound to the old one.
该插件看起来不是很健壮。如果您.placeholder()再次调用，它会创建一个新Placeholder实例，而事件仍然绑定到旧实例。
Looking at the code, it looks like you could do:
查看代码，您似乎可以这样做：
$("#serMemtb").attr("placeholder", "Type a name (Lastname, Firstname)").blur();
EDIT
编辑
placeholderis an HTML5 attribute, guess who's not supporting it?
placeholder是一个HTML5 属性，猜猜谁不支持它？
Your plugin doesn't really seem to help you overcome the fact that IE doesn't support it, so while my solution works, your plugin doesn't. Why don't you find one that does.
您的插件似乎并没有真正帮助您克服 IE 不支持它的事实，因此虽然我的解决方案有效，但您的插件却没有。你为什么不找一个这样做的。
回答by Jason
$(this).val()is a string. Use parseInt($(this).val(), 10)or check for '1'. The ten is to denote base 10.
$(this).val()是一个字符串。使用parseInt($(this).val(), 10)或检查“1”。十是表示基数为 10。
$(function () {
$('input[placeholder], textarea[placeholder]').blur();
$('#serMemdd').change(function () {
var k = $(this).val();
if (k == '1') {
$("#serMemtb").attr("placeholder", "Type a name (Lastname, Firstname)").blur();
}
else if (k == '2') {
$("#serMemtb").attr("placeholder", "Type an ID").blur();
}
else if (k == '3') {
$("#serMemtb").attr("placeholder", "Type a Location").blur();
}
});
});
Or
或者
$(function () {
$('input[placeholder], textarea[placeholder]').placeholder();
$('#serMemdd').change(function () {
var k = parseInt($(this).val(), 10);
if (k == 1) {
$("#serMemtb").attr("placeholder", "Type a name (Lastname, Firstname)").blur();
}
else if (k == 2) {
$("#serMemtb").attr("placeholder", "Type an ID").blur();
}
else if (k == 3) {
$("#serMemtb").attr("placeholder", "Type a Location").blur();
}
});
});
Other Plugins
其他插件
ori has brought to my attention that the plugin you are using does not overcome IEs HTML failure.
ori 引起了我的注意，您正在使用的插件不能克服 IE 的 HTML 故障。
Try something like this: http://archive.plugins.jquery.com/project/input-placeholder
尝试这样的事情：http: //archive.plugins.jquery.com/project/input-placeholder
回答by Love Kumar
change placeholder text using jquery
使用 jquery 更改占位符文本
try this
尝试这个
$('#selector').attr("placeholder", "Type placeholder");
回答by overflow
working example of dynamic placeholder using Javascript and Jquery http://jsfiddle.net/ogk2L14n/1/
使用 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");
}
}
回答by Timothy Aaron
Moving your first line to the bottom does it for me: http://jsfiddle.net/tcloninger/SEmNX/
将你的第一行移到底部对我来说是这样的：http: //jsfiddle.net/tcloninger/SEmNX/
$(function () {
$('#serMemdd').change(function () {
var k = $(this).val();
if (k == 1) {
$("#serMemtb").attr("placeholder", "Type a name (Lastname, Firstname)").placeholder();
}
else if (k == 2) {
$("#serMemtb").attr("placeholder", "Type an ID").placeholder();
}
else if (k == 3) {
$("#serMemtb").attr("placeholder", "Type a Location").placeholder();
}
});
$('input[placeholder], textarea[placeholder]').placeholder();
});
回答by Love Kumar
If the input is inside the div than you can try this:
如果输入在 div 内，则可以尝试以下操作：
$('#div_id input').attr("placeholder", "placeholder text");
回答by Love Kumar
try this
尝试这个
$('#Selector_ID').attr("placeholder", "your Placeholder");
