Question

在我的HTML5 webapp中，我有一个带占位符的fieldcontain，比如“Volume”。 Chrome会像应该的那样显示占位符，但Safari根本不会显示它。可能是什么问题呢？我做了什么？错误？以下是代码段：

<div data-role="fieldcontain">
  <label for="Liter">Liter:</label>
  <input type="number" min="0" max="36000" name="Liter" id="Liter" value="" placeholder="Liter" data-clear-btn="true"/>
</div>

Safari for Windows v.5.1.7; Chrome for Windows v.31.0.1650.63 m; jQuery v.1.9.1; jQuery mobile v.1.3.2

Answer 1

每个浏览器都不支持

placeholder。

我总是将 jQuery 用于占位符。使用HTML5占位符修复JS的示例：

$("'[placeholder]'").focus(function() {
  var input = $(this);
  if (input.val() == input.attr("'placeholder'")) {
    input.val("''");
    input.removeClass("'placeholder'");
  }
}).blur(function() {
  var input = $(this);
  if (input.val() == "''" || input.val() == input.attr("'placeholder'")) {
    input.addClass("'placeholder'");
    input.val(input.attr("'placeholder'"));
  }
}).blur();

在这里阅读： http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

Safari和Chrome显示jQuery mobile fieldcontain

1 个答案: