html - html中占位符的替代方法是什么？

Question

什么是 HTML 的 XHTML 等价物placeholder。

Answer 1

placeholder是 HTML 5 中的新内容。

XHTML 1.x（它是 HTML 4.x 的 XML 版本）中没有等价物

当然，它在 HTML 5 的 XML 序列化中可用。

否则，您将不得不使用 JavaScript 伪造它（这可能最好通过绝对定位第二个<label>元素来完成<input>，您将其设置为具有透明背景色，除非它具有值或焦点）。

Answer 2

我做了一个实验来模拟使用 xhtml+js+css 的占位符，就像发生在 HTML5 占位符属性上一样。

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