What is the alternative of placeholder in html for xhtml? - html

Question

What is the XHTML equivalent of HTML placeholder.

Answer 1

placeholder is new in HTML 5.
There is no equivalent in XHTML 1.x (which is the XML version of HTML 4.x)
It is, of course, available in the XML serialisation of HTML 5.
Failing that, you would have to fake it using JavaScript (which is probably best done by absolutely positioning a second <label> element under the <input> which you set to have a transparent background colour unless it has a value or the focus).

Answer 2

I did a experiment to simulate the placeholder using xhtml+js+css as happen on HTML5 placeholder property.
xhtml:
<input id="textbox-obj" type="text" class="search-txt" data-placeholder="Search" title="Search something here">
Javascript (jquery):
//Function to place the textbox cursor to the begining
function moveCursorToStart(el) {
if (typeof el.selectionStart == "number") {
el.selectionStart = el.selectionEnd = 0;
} else if (typeof el.createTextRange != "undefined") {
el.focus();
var range = el.createTextRange();
range.collapse(true);
range.select();
}
}
function initSearchTextPlaceholder(textBox) {
textBox.focus(function() {
if( $(this).val() == $(this).attr('data-placeholder') ) {
moveCursorToStart(this);
// To fix Chrome's bug
window.setTimeout(function() {
moveCursorToStart(this);
}, 1);
}
}).blur(function() {
if( $(this).val() == $(this).attr('data-placeholder') || $(this).val() == '' ) {
$(this).addClass('placeholder').val($(this).attr('data-placeholder'));
}
}).on('keypress', function() {
if( $(this).val() == $(this).attr('data-placeholder') ) {
$(this).removeClass('placeholder').val('');
}
}
).blur();
}
initSearchTextPlaceholder($("#textbox-obj"));
CSS
.search-txt {
color: #333;
}
.search-txt.placeholder {
color: #8d8d8d;
}