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;
}