在文本框中输入之前，应该可以看到地方持有人

Question

我有一个关于可用性的简单问题......

目前正在使用HTML5和PhoneGap处理移动应用程序。 在这里，我需要显示占位符，直到用户在该文本框中键入内容。如果占位符没有输入任何内容，只关注该文本框，则应该可以看到占位符。这是因为用户通常在阅读下一个字段之前按下选项卡，在这种情况下，空文本已经消失，并且用户更难以知道要键入的内容。像Twitter Login Page我们可以使用HTML5功能在我的应用程序中执行相同操作吗？

在浏览器中它的工作正常（在焦点时不隐藏）但在移动设备中不能

有没有解决方案？...

Answer 1

这将保留文本，直到用户开始输入：

演示：http://jsfiddle.net/tymeJV/JERQf/2/

<input type="text" id="test" value="Im a placeholder!"/>

var placeholder = $("#test").val();

$("#test").keydown(function() {
    if (this.value == placeholder) {
        this.value = '';
    }
}).blur(function() {
    if (this.value == '') {
        this.value = placeholder;
    }
});

我还添加了一个blur()函数，如果用户什么都没有输入，那么它会再次用占位符填充该字段。

Answer 2

这是一个很好的跨浏览器解决方案，利用Modernizr进行回退

<input type="text" placeholder="search text" />

<script src="jquery.js"></script>
<script src="modernizr.js"></script>

<script>
$(document).ready(function(){

if(!Modernizr.input.placeholder){

    $('[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();
    $('[placeholder]').parents('form').submit(function() {
      $(this).find('[placeholder]').each(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
          input.val('');
        }
      })
    });

}

</script>