1

我在 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 值之后。 在此处输入图像描述

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

4

5 回答 5

0

工作示例：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();

将插入符号光标放在输入开始位置，就像在我的示例中一样，只有在输入 vale = 占位符文本时才能执行此操作。

于 2013-05-31T11:46:33.330 回答
0

像这样试试

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

看演示

于 2013-05-31T10:16:49.607 回答
0

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

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

于 2013-05-31T10:27:28.733 回答
0

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

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

并删除它..

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

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

于 2013-05-31T10:39:48.840 回答
-1

在第二次你需要获得输入的价值 - 也使用 .val()

于 2013-05-31T10:06:40.547 回答