1

What is the XHTML equivalent of HTML placeholder.

2
  • What makes you think that the placeholder attribute doesn't work in both xHTML and HTML? Commented Oct 31, 2013 at 22:03
  • 5
    It does not validate with an xhtml validator. the xhtml does not have "placeholder" as an attribute.
    – NYCity
    Commented Oct 31, 2013 at 22:04

2 Answers 2

6

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).

1
  • Thank you for the answer. I kept assuming there was an equivalent or alternative directly using only xhtml. I shall try using JavaScript.
    – NYCity
    Commented Oct 31, 2013 at 22:08
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;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.