在输入文本框之前，占位符应该是可见的答案

【问题标题】：Place Holder should be visible until type in textbox在输入文本框之前，占位符应该是可见的
【发布时间】：2013-05-31 12:36:13
【问题描述】：

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

目前正在使用 HTML5 和 PhoneGap 运行移动应用程序。在这里，我需要显示占位符，直到用户在该文本框中键入内容。如果他没有输入任何内容而是专注于该文本框，则占位符应该是可见的。这是因为用户通常在阅读下一个字段之前按下选项卡，在这种情况下，空文本已经消失，用户很难知道要输入什么。比如Twitter Login Page 我们可以在我的应用程序中使用 HTML5 功能做同样的事情吗？

它在浏览器中工作正常（焦点时不隐藏）......但在移动设备中却没有

有什么解决办法吗？？...

【问题讨论】：

那么使用通常的placeholder 属性有什么问题？
占位符属性在焦点上擦除
如果您使用制表键导航表单，用户通常会在阅读下一个字段之前按下制表符，在这种情况下，空文本已经消失，用户很难知道要输入什么。
@tymeJV 不能代表移动设备，但在 FF 和 Chrome 中的快速测试会留下占位符，直到我真正输入内容。
@Sirko 在浏览器中可以。但不在移动设备中！ :(

标签： jquery html css jquery-mobile cordova

【解决方案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() 函数，如果用户什么都不输入，那么它会再次用占位符填充该字段。

【讨论】：

@tymeJV 我可以提一个建议吗？ Updated JsFiddle。我添加了一个 keyup 事件，这样如果你输入一些内容然后完全退格，占位符会重新出现在框中，而不必模糊。
在移动端测试时不隐藏！
现在正在使用 ADT（Android 开发工具包）进行测试，这里我们有它的虚拟设备.. 在这它不是隐藏的！\
使用 Android SDK，您可以指定操作系统版本等，您正在测试什么规格？最新最好的 4.x，还是更常见的 2.3.x？
@tymeJV 现在使用您的代码可以正常工作。但有一个问题。当我们单击文本框时，第一个字符将附加在“占位符”文本之后。但实际上我需要从文本框的开头开始锻炼.. 我能做什么？

【解决方案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>

【讨论】：

modernizer 的链接在哪里？