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

Question

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

目前正在使用 HTML5 和 PhoneGap 工作移动应用程序。在这里，我需要显示占位符，直到用户在该文本框中键入内容。如果他没有输入任何内容而是专注于该文本框，则占位符应该是可见的。这是因为用户通常在阅读下一个字段之前按下选项卡，在这种情况下，空文本已经消失，用户很难知道要输入什么。像Twitter 登录页面我们可以在我的应用程序中使用 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>