PlaceHolder 在移动设备中无法正常工作答案

【问题标题】：PlaceHolder is not working properly in Mobile DevicesPlaceHolder 在移动设备中无法正常工作
【发布时间】：2013-05-31 10:03:10
【问题描述】：

我在 jQueryMobile 和 PhoneGap 工作。

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

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

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

所以我手动实现了..

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 值之后。

但我需要的是光标应该从文本框的开头开始。对此我能做什么？

【问题讨论】：

何不试试html5占位符属性，目前大部分手机浏览器都支持了？
是的...我已经尝试过...但是在移动时我们专注于；它会出现。但它不会在浏览器中发生。
这是因为用户通常会在阅读下一个字段之前按下选项卡，在这种情况下，空文本已经消失，用户很难知道要输入什么。

标签： jquery html jquery-mobile cordova

【解决方案1】：

这样试试

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

See Demo

【讨论】：

但是在这段代码中；（当我们使用移动设备时）当我们关注那个文本框时，它的值被清除了。我只需要在输入内容时清除它..！
@ULLASMOHAN.V 使用占位符并删除所有脚本jsfiddle.net/TKUt8/2

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

你可以找到一个演示here。

【讨论】：

但是在这段代码中；（当我们使用移动设备时）当我们关注那个文本框时，它的值被清除了。我只需要在输入内容时清除它..！
如果您的移动浏览器支持占位符属性，这似乎是您浏览器中的默认行为（在带有 chrome 的 iphone 上进行了测试，当您输入内容时它会变为空）。如果您处于后备状态，我使用了 focus 方法 - 所以将其更改为 keydown。
@ULLASMOHAN.V 请注意，当您单击该字段时，它不是按键事件。因此，当将光标放在占位符文本后面时，浏览器会正确运行。
我可以用按键代替焦点吗？？
当我尝试 Keydown 时；它也不符合我的要求:(

【解决方案3】：

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

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

并删除它..

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

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

【讨论】：

但是在这段代码中；（当我们使用移动设备时）当我们关注那个文本框时，它的值被清除了。我只需要在输入内容时清除它..！
这将替换文本框中的文本，如果它是空的。现在您的要求是“占位符值应该在那里，并且一旦输入内容就应该更改”.. 对吗？
最好的解决方案是在焦点上将文本框的值更改为“占位符”，然后在文本框的 keyup 事件上将值与“占位符”进行比较，如果它不同，则什么都不做，如果没有在文本框中将值设置为“占位符”并设置焦点并选择整个文本！这会有帮助吗？
保留占位符并使用它.. code$("#test").keyup(function() { if ($("#test").val() = = "") { $("#test").val('placeholder'); $(this).focus(function () { $(this).select();}); } });code .........................这会将“占位符”文本放在文本框中，并聚焦并选择它..用户键入清除并离开的内容用什么用户类型..
是的......目前我是手动完成的......但我的问题是光标在文本“Placeholder”之后显示..

【解决方案4】：

工作示例：http://jsfiddle.net/Gajotres/cuKxm/

你需要这个 jQuery 插件：https://github.com/DrPheltRight/jquery-caret

$(document).on('pagebeforeshow', '#index', function(){ 
    var input = $('#test');
    var placeholder = $("#test").val();
    $("#test").keydown(function() {   
        if (this.value == placeholder) {
            this.value = '';
        }
    }).blur(function() {
        if (this.value == '') {
            this.value = placeholder;
        }
    }).focus(function() {
        if (this.value == placeholder) {
            input.caretToStart();
        }        
    });      
});

这一行：

input.caretToStart();

将插入符号光标放在输入开始位置，就像在我的示例中一样，只有在输入值 = 占位符文本时才能这样做。

【讨论】：

【解决方案5】：

第二次您需要获取输入值 - 也使用 .val()

【讨论】：