In most browsers, the placeholder text is grey. To change this, style the placeholder with the non-standard ::placeholder selector.
Change Input Placeholder Text with CSS You can use the ::placeholder pseudo-element to change the styles of the placeholder text, which includes the ability to change the background.
The placeholder attribute specifies a short hint that describes the expected value of a text field (e.g. a sample value or a short description of the expected format). The short hint is displayed in the text field before the user enters a value.
$(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.
You can use following code to update a placeholder by id:
$("#serMemtb").attr("placeholder", "Type a Location").val("").focus().blur();
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.
The plugin doesn't look very robust. If you call .placeholder()
again, it creates a new Placeholder
instance while events are still bound to the old one.
Looking at the code, it looks like you could do:
$("#serMemtb").attr("placeholder", "Type a name (Lastname, Firstname)").blur();
EDIT
placeholder
is an HTML5 attribute, guess who's not supporting it?
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.
$(this).val()
is a string. Use parseInt($(this).val(), 10)
or check for '1'. The ten is to denote base 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();
}
});
});
$(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();
}
});
});
ori has brought to my attention that the plugin you are using does not overcome IEs HTML failure.
Try something like this: http://archive.plugins.jquery.com/project/input-placeholder
working example of dynamic placeholder using Javascript and 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");
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With