jquery - モバイル デバイスで PlaceHolder が正しく機能しない

Question

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 の先頭から開始する必要があります。これで何ができますか？

Answer 1

作業例: 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();

キャレットカーソルを入力の開始位置に置きます。私の例のように、入力値 = プレースホルダーテキストの場合にのみこれを行うことができます.

Answer 2

2回目は、入力の値を取得する必要があります - .val() も使用してください