PlaceHolder在移动设备中不能正常工作

Question

我在jQueryMobile和PhoneGap工作。

我有个问题。当我使用PlaceHolder时；

<input name="text-6" id="text-6" value="" placeholder="Put something here" type="text"/>

它在浏览器中工作得很好，但在Mobile中就不行了。我的需求就在这里，我需要显示占位符，直到用户在那个文本框中输入一些东西。占位符应该是可见的，如果他没有键入任何东西，只专注于那个文本框。这是因为用户通常在读取下一个字段之前按下选项卡，在这种情况下，空文本已经消失，用户很难知道要键入什么。就像Twitter登录页。但是当我们专注于那个textBox的时候，它就隐藏了。

所以我手动实现了。

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

JQuery

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

​

​

但是，当我单击textBox时，光标将显示在PlaceHolder值之后。

​

，但我需要的是光标应该从TextBox的开头开始。我能做些什么呢？

Answer 1

试着像这样

var placeholdervalue = $("#test").attr("value");
$("#test").focus(function(){
$(this).attr('value',"");
});
$("#test").on("blur",function(){
$(this).attr('value',placeholdervalue);
});

见Demo

Answer 2

正如我在上面的注释中提到的，我将使用html5占位符属性和浏览器的回退，这些浏览器不支持这样的操作：

// test the support
function hasPlaceholderSupport() {
    var input = document.createElement('input');
    return ('placeholder' in input);
}

// and as a fallback...
if(!hasPlaceholderSupport) {
$('input[type=text]').each(function() {
       var elm  = $(this),
        ph = $(this).attr('placehold');
    if(ph) {
        elm.focus(function() {
            if($(this).val() == ph) {
               $(this).val('');
            }
        }).blur(function() {
          if($(this).val() == '') {
               $(this).val(ph);
            }
        });
    }
})};

您可以找到一个演示这里。

Answer 3

占位符是HTMl5中输入框的一个属性。所以你最好把它当作

$("#idoftheelement").attr("placeholder","your text in placeholder");

移除它..。

$("#idoftheelement").removeAttr("placeholder");

试试这个，让我知道它是否有效……