移动设备中的PlaceHolder无法正常工作

我在jQueryMobile和PhoneGap中工作。

在这里我有一个问题。 当我使用PlaceHolder;

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

它在浏览器中运行良好，但在移动设备中不起作用 我的需要是在这里，我需要显示占位符，直到用户在该文本框中键入内容。 如果他没有输入任何内容，只需关注该文本框，则占位符应该可见。 这是因为用户通常在阅读下一个字段之前按下该选项卡，在这种情况下，空文本已经消失，用户很难知道要输入的内容。 像Twitter登录页面。 但是当我们关注那个文本框时它隐藏起来。

所以我手动实施它..

HTML

<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;
    }
});

但是当我点击文本框时， 光标显示在PlaceHolder值后面。

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

---

像这样尝试

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

查看演示

---

正如我在上面的评论中提到的那样，我将使用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);
            }
        });
    }
})};

你可以在这里找到一个演示。

---

占位符是HTMl5中的一个属性，用于输入框..所以最好你给它

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

并删除它..

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

试试这个让我知道它是否工作.....

链接地址: http://www.djcxy.com/p/70569.html

上一篇: PlaceHolder is not working properly in Mobile Devices

下一篇: Internet Explorer lack of placeholder support, specifically password fields