Question

什么是HTML placeholder的XHTML等价物。

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

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

2 个答案: