PlaceHolder не працуе належным чынам у мабільных прыладах

Я працую ў jQueryMobile і PhoneGap.

Тут у мяне ёсць праблема. Калі я выкарыстоўваю PlaceHolder;

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

Гэта выдатна працуе ў браўзэры, але не ў мабільным тэлефоне. Мая патрэба была тут я павінен паказаць запаўняльнік да тыпу карыстальніка што-то ў гэтым тэкставым полі. Запаўняльнік павінен быць бачны, калі ён нічога не ўводзіць, але засяродзіцца на гэтым тэкставым полі. Гэта адбываецца таму, што карыстальнікі, як правіла, націсніце на ўкладку перад чытаннем наступнага поля ў гэтым выпадку пусты тэкст ўжо сышло, і карыстальнік мае больш цяжкі час ведаючы, што тып. як Twitter Увайсці старонку . Але яго не паказваць, калі мы засяроджваецца на тым TextBox.

Так што я рэалізаваў гэта ўручную ..

<�Моцны> 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;
    }
});

enter image description here

But when I click on the textBox; Cursor is showing after the PlaceHolder value. enter image description here

But My need is the Cursor should be starts from the beginning of the TextBox. What can I do in this?

1
Чаму б вам не паспрабаваць html5 запаўняльнік attribut, большасць сучасных мабільных браўзэраў падтрымліваюць яго ўжо?
дададзена аўтар axel.michel, крыніца
Так ... Я ўжо спрабаваў .. Але ў мабілу, калі мы арыентуемся; яна будзе з'яўляцца Дыс. але гэта не будзе адбывацца ў браўзэры.
дададзена аўтар ULLAS MOHAN.V, крыніца
Так ... Я ўжо спрабаваў .. Але ў мабілу, калі мы арыентуемся; яна будзе з'яўляцца Дыс. але гэта не будзе адбывацца ў браўзэры.
дададзена аўтар ULLAS MOHAN.V, крыніца
Гэта адбываецца таму, што карыстальнікі, як правіла, націсніце на ўкладку перад чытаннем наступнага поля ў гэтым выпадку пусты тэкст ўжо сышло, і карыстальнік мае больш цяжкі час ведаючы, што тып.
дададзена аўтар ULLAS MOHAN.V, крыніца
Гэта адбываецца таму, што карыстальнікі, як правіла, націсніце на ўкладку перад чытаннем наступнага поля ў гэтым выпадку пусты тэкст ўжо сышло, і карыстальнік мае больш цяжкі час ведаючы, што тып.
дададзена аўтар ULLAS MOHAN.V, крыніца
Гэта адбываецца таму, што карыстальнікі, як правіла, націсніце на ўкладку перад чытаннем наступнага поля ў гэтым выпадку пусты тэкст ўжо сышло, і карыстальнік мае больш цяжкі час ведаючы, што тып.
дададзена аўтар ULLAS MOHAN.V, крыніца

14 адказы

ў другі раз вам трэба атрымаць значэнне ўваходу - выкарыстоўвайце .val() таксама

1
дададзена

ў другі раз вам трэба атрымаць значэнне ўваходу - выкарыстоўвайце .val() таксама

1
дададзена

ў другі раз вам трэба атрымаць значэнне ўваходу - выкарыстоўвайце .val() таксама

1
дададзена

запаўняльнікам з'яўляецца атрыбутам ў html5 для ўводу .. таму лепш у даць як

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

і выдаліць яго ..

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

паспрабаваць гэта, дайце мне ведаць, калі ён працуе .....

0
дададзена
Вы павінны засяродзіцца тэкст, а затым выберыце яго ..
дададзена аўтар Venkata Tata, крыніца
пакінуць запаўняльнік, як гэта і выкарыстоўваць гэта .. код $ ( "# тэст"). KeyUp (функцыя() {калі ($ ( "# тэст"). Вал() == "" ) {$ ( "# тэст") вал ( 'запаўняльнікам.'); $ (гэта) .focus (функцыя() {$ (гэта) .select ();});}}); код ........................ гэта змесціць «запаўняльнік» тэкст у тэкставым полі і факусуюць і выбірае яго .. на карыстальнік друкаваў тое, што ачышчае і сыходзіць з тыпамі, што карыстальнік ..
дададзена аўтар Venkata Tata, крыніца
Лепшае рашэнне на фокусе змяніць значэнне тэкставага поля «запаўняльнік», а затым на KeyUp выпадку тэкставага поля параўноўвае значэнне з «запаўняльнікам», калі яго іншыя не рабіць нічога, і калі няма нічога ў тэкставым полі ўсталюеце значэнне «запаўняльнік» і ўсталяваць фокус з усім тэкстам абраны !! гэта дапаможа?
дададзена аўтар Venkata Tata, крыніца
гэта будзе замяніць тэкст у тэкставым полі, калі яго пустым. Цяпер ваша патрабаванне «значэнне трымальніка месца павінна быць там, і адзін раз пры ўводзе нешта павінна змяніцца» .. гэта праўда?
дададзена аўтар Venkata Tata, крыніца
Але ў кодзе (пры выкарыстанні мабільных прылад), калі мы арыентуемся ў тым, што тэкставае поле яго значэнне cleard. мне трэба яго cleard толькі тыпу што-то ..!
дададзена аўтар ULLAS MOHAN.V, крыніца
Да ... У цяперашні час я зрабіў гэта ўручную ... але мая праблема заключаецца ў cursr паказвае пасля тэксту «запаўняльнік» ..
дададзена аўтар ULLAS MOHAN.V, крыніца
вар запаўняльнік = $ ( "# тэст") Вал (). папярэджанне ( '0'); . $ ( "# Тэст") KeyDown (функцыя() {калі (this.value == запаўняльнікам) {this.value = '';//папярэджанне ( '1'); //test.Attributes.Add("onfocus "" вяртанне SetCursorToTextStart (this.id)}}). размытасці (функцыя() {калі (this.value == '') {this.value = запаўняльнік}}). фокус (функцыя() {$ (гэта) .setCursorPosition (0);}); Я паспрабаваў гэта ўсё ... Але :(
дададзена аўтар ULLAS MOHAN.V, крыніца
. Я паспрабаваў гэта .. вар запаўняльнік = $ ( "# тэст") Val (); папярэджанне ( '0'); . $ ( "# Тэст") KeyDown (функцыя() {калі (this.value == запаўняльнікам) {this.value = '';//папярэджанне ( '1'); //test.Attributes.Add("onfocus "" вяртанне SetCursorToTextStart (this.id)}}). размытасці (функцыя() {калі (this.value == '') {this.value = запаўняльнік}}). фокус (функцыя() {//.$ (гэта) .setCursorPosition (0); $ (гэта) .select (); папярэджанне ( '1');}); функцыя hasPlaceholderSupport() {ўваходных пераменная = document.createElement ( 'ўваход'); вяртанне ( 'запаўняльнік' на ўваходзе);}
дададзена аўтар ULLAS MOHAN.V, крыніца
да ... @Venkata Tata
дададзена аўтар ULLAS MOHAN.V, крыніца

запаўняльнікам з'яўляецца атрыбутам ў html5 для ўводу .. таму лепш у даць як

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

і выдаліць яго ..

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

паспрабаваць гэта, дайце мне ведаць, калі ён працуе .....

0
дададзена
пакінуць запаўняльнік, як гэта і выкарыстоўваць гэта .. код $ ( "# тэст"). KeyUp (функцыя() {калі ($ ( "# тэст"). Вал() == "" ) {$ ( "# тэст") вал ( 'запаўняльнікам.'); $ (гэта) .focus (функцыя() {$ (гэта) .select ();});}}); код ........................ гэта змесціць «запаўняльнік» тэкст у тэкставым полі і факусуюць і выбірае яго .. на карыстальнік друкаваў тое, што ачышчае і сыходзіць з тыпамі, што карыстальнік ..
дададзена аўтар Venkata Tata, крыніца
Лепшае рашэнне на фокусе змяніць значэнне тэкставага поля «запаўняльнік», а затым на KeyUp выпадку тэкставага поля параўноўвае значэнне з «запаўняльнікам», калі яго іншыя не рабіць нічога, і калі няма нічога ў тэкставым полі ўсталюеце значэнне «запаўняльнік» і ўсталяваць фокус з усім тэкстам абраны !! гэта дапаможа?
дададзена аўтар Venkata Tata, крыніца
Вы павінны засяродзіцца тэкст, а затым выберыце яго ..
дададзена аўтар Venkata Tata, крыніца
гэта будзе замяніць тэкст у тэкставым полі, калі яго пустым. Цяпер ваша патрабаванне «значэнне трымальніка месца павінна быць там, і адзін раз пры ўводзе нешта павінна змяніцца» .. гэта праўда?
дададзена аўтар Venkata Tata, крыніца
да ... @Venkata Tata
дададзена аўтар ULLAS MOHAN.V, крыніца
Да ... У цяперашні час я зрабіў гэта ўручную ... але мая праблема заключаецца ў cursr паказвае пасля тэксту «запаўняльнік» ..
дададзена аўтар ULLAS MOHAN.V, крыніца
вар запаўняльнік = $ ( "# тэст") Вал (). папярэджанне ( '0'); . $ ( "# Тэст") KeyDown (функцыя() {калі (this.value == запаўняльнікам) {this.value = '';//папярэджанне ( '1'); //test.Attributes.Add("onfocus "" вяртанне SetCursorToTextStart (this.id)}}). размытасці (функцыя() {калі (this.value == '') {this.value = запаўняльнік}}). фокус (функцыя() {$ (гэта) .setCursorPosition (0);}); Я паспрабаваў гэта ўсё ... Але :(
дададзена аўтар ULLAS MOHAN.V, крыніца
. Я паспрабаваў гэта .. вар запаўняльнік = $ ( "# тэст") Val (); папярэджанне ( '0'); . $ ( "# Тэст") KeyDown (функцыя() {калі (this.value == запаўняльнікам) {this.value = '';//папярэджанне ( '1'); //test.Attributes.Add("onfocus "" вяртанне SetCursorToTextStart (this.id)}}). размытасці (функцыя() {калі (this.value == '') {this.value = запаўняльнік}}). фокус (функцыя() {//.$ (гэта) .setCursorPosition (0); $ (гэта) .select (); папярэджанне ( '1');}); функцыя hasPlaceholderSupport() {ўваходных пераменная = document.createElement ( 'ўваход'); вяртанне ( 'запаўняльнік' на ўваходзе);}
дададзена аўтар ULLAS MOHAN.V, крыніца
Але ў кодзе (пры выкарыстанні мабільных прылад), калі мы арыентуемся ў тым, што тэкставае поле яго значэнне cleard. мне трэба яго cleard толькі тыпу што-то ..!
дададзена аўтар ULLAS MOHAN.V, крыніца

запаўняльнікам з'яўляецца атрыбутам ў html5 для ўводу .. таму лепш у даць як

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

і выдаліць яго ..

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

паспрабаваць гэта, дайце мне ведаць, калі ён працуе .....

0
дададзена
пакінуць запаўняльнік, як гэта і выкарыстоўваць гэта .. код $ ( "# тэст"). KeyUp (функцыя() {калі ($ ( "# тэст"). Вал() == "" ) {$ ( "# тэст") вал ( 'запаўняльнікам.'); $ (гэта) .focus (функцыя() {$ (гэта) .select ();});}}); код ........................ гэта змесціць «запаўняльнік» тэкст у тэкставым полі і факусуюць і выбірае яго .. на карыстальнік друкаваў тое, што ачышчае і сыходзіць з тыпамі, што карыстальнік ..
дададзена аўтар Venkata Tata, крыніца
Лепшае рашэнне на фокусе змяніць значэнне тэкставага поля «запаўняльнік», а затым на KeyUp выпадку тэкставага поля параўноўвае значэнне з «запаўняльнікам», калі яго іншыя не рабіць нічога, і калі няма нічога ў тэкставым полі ўсталюеце значэнне «запаўняльнік» і ўсталяваць фокус з усім тэкстам абраны !! гэта дапаможа?
дададзена аўтар Venkata Tata, крыніца
гэта будзе замяніць тэкст у тэкставым полі, калі яго пустым. Цяпер ваша патрабаванне «значэнне трымальніка месца павінна быць там, і адзін раз пры ўводзе нешта павінна змяніцца» .. гэта праўда?
дададзена аўтар Venkata Tata, крыніца
Вы павінны засяродзіцца тэкст, а затым выберыце яго ..
дададзена аўтар Venkata Tata, крыніца
да ... @Venkata Tata
дададзена аўтар ULLAS MOHAN.V, крыніца
Да ... У цяперашні час я зрабіў гэта ўручную ... але мая праблема заключаецца ў cursr паказвае пасля тэксту «запаўняльнік» ..
дададзена аўтар ULLAS MOHAN.V, крыніца
вар запаўняльнік = $ ( "# тэст") Вал (). папярэджанне ( '0'); . $ ( "# Тэст") KeyDown (функцыя() {калі (this.value == запаўняльнікам) {this.value = '';//папярэджанне ( '1'); //test.Attributes.Add("onfocus "" вяртанне SetCursorToTextStart (this.id)}}). размытасці (функцыя() {калі (this.value == '') {this.value = запаўняльнік}}). фокус (функцыя() {$ (гэта) .setCursorPosition (0);}); Я паспрабаваў гэта ўсё ... Але :(
дададзена аўтар ULLAS MOHAN.V, крыніца
. Я паспрабаваў гэта .. вар запаўняльнік = $ ( "# тэст") Val (); папярэджанне ( '0'); . $ ( "# Тэст") KeyDown (функцыя() {калі (this.value == запаўняльнікам) {this.value = '';//папярэджанне ( '1'); //test.Attributes.Add("onfocus "" вяртанне SetCursorToTextStart (this.id)}}). размытасці (функцыя() {калі (this.value == '') {this.value = запаўняльнік}}). фокус (функцыя() {//.$ (гэта) .setCursorPosition (0); $ (гэта) .select (); папярэджанне ( '1');}); функцыя hasPlaceholderSupport() {ўваходных пераменная = document.createElement ( 'ўваход'); вяртанне ( 'запаўняльнік' на ўваходзе);}
дададзена аўтар ULLAS MOHAN.V, крыніца
Але ў кодзе (пры выкарыстанні мабільных прылад), калі мы арыентуемся ў тым, што тэкставае поле яго значэнне cleard. мне трэба яго cleard толькі тыпу што-то ..!
дададзена аўтар ULLAS MOHAN.V, крыніца

Паспрабуйце, як гэта

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

Глядзі Дэманстрацыйны

0
дададзена
@ ULLASMOHAN.V выкарыстоўваць трымальнік месца і выдаліць усе сцэнар jsfiddle.net/TKUt8/2
дададзена аўтар Dineshkani, крыніца
Але ў кодзе (пры выкарыстанні мабільных прылад), калі мы арыентуемся ў тым, што тэкставае поле яго значэнне cleard. мне трэба яго cleard толькі тыпу што-то ..!
дададзена аўтар ULLAS MOHAN.V, крыніца

Паспрабуйце, як гэта

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

Глядзі Дэманстрацыйны

0
дададзена
@ ULLASMOHAN.V выкарыстоўваць трымальнік месца і выдаліць усе сцэнар jsfiddle.net/TKUt8/2
дададзена аўтар Dineshkani, крыніца
Але ў кодзе (пры выкарыстанні мабільных прылад), калі мы арыентуемся ў тым, што тэкставае поле яго значэнне cleard. мне трэба яго cleard толькі тыпу што-то ..!
дададзена аўтар ULLAS MOHAN.V, крыніца

Паспрабуйце, як гэта

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

Глядзі Дэманстрацыйны

0
дададзена
@ ULLASMOHAN.V выкарыстоўваць трымальнік месца і выдаліць усе сцэнар jsfiddle.net/TKUt8/2
дададзена аўтар Dineshkani, крыніца
Але ў кодзе (пры выкарыстанні мабільных прылад), калі мы арыентуемся ў тым, што тэкставае поле яго значэнне cleard. мне трэба яго cleard толькі тыпу што-то ..!
дададзена аўтар ULLAS MOHAN.V, крыніца

Working example: http://jsfiddle.net/Gajotres/cuKxm/

You will need this jQuery plugin: 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();

паставіць карэтку курсор на ўваходзе пачатку пазіцыі, і як у маім прыкладзе вы можаце зрабіць гэта толькі тады, калі ўваход юдолі = шаблонны тэкст.

0
дададзена

Working example: http://jsfiddle.net/Gajotres/cuKxm/

You will need this jQuery plugin: 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();

паставіць карэтку курсор на ўваходзе пачатку пазіцыі, і як у маім прыкладзе вы можаце зрабіць гэта толькі тады, калі ўваход юдолі = шаблонны тэкст.

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

Вы можаце знайсці дэма .

0
дададзена
@ ULLASMOHAN.V ведаць, што пры націску на поле, гэта не KeyDown падзея. Такім чынам, браўзэр паводзіць сябе карэктна пры ўводзе курсора пад тэкстам placehoder.
дададзена аўтар axel.michel, крыніца
У выпадку, калі ваш мабільны браўзэр падтрымлівае атрыбут запаўняльніка, гэта, здаецца, па змаўчанні ў вашым браўзэры (тэставалі на Iphone з хромам, ён спусташаецца, калі вы ўводзіце што-то). У выпадку, калі вы знаходзіцеся ў запасным варыянце, я выкарыстаў метад факусоўкі - дык гэта змяніць да KeyDown.
дададзена аўтар axel.michel, крыніца
Але ў кодзе (пры выкарыстанні мабільных прылад), калі мы арыентуемся ў тым, што тэкставае поле яго значэнне cleard. мне трэба яго cleard толькі тыпу што-то ..!
дададзена аўтар ULLAS MOHAN.V, крыніца
Ці магу я выкарыстаць замест націску клавішы фокусу ??
дададзена аўтар ULLAS MOHAN.V, крыніца
Калі я спрабую KeyDown; яго таксама не добра для майго патрабаванні :(
дададзена аўтар ULLAS MOHAN.V, крыніца

Як я ўжо казаў у каментарах вышэй, я буду працаваць з атрыбутам 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);
            }
        });
    }
})};

Вы можаце знайсці дэма .

0
дададзена
У выпадку, калі ваш мабільны браўзэр падтрымлівае атрыбут запаўняльніка, гэта, здаецца, па змаўчанні ў вашым браўзэры (тэставалі на Iphone з хромам, ён спусташаецца, калі вы ўводзіце што-то). У выпадку, калі вы знаходзіцеся ў запасным варыянце, я выкарыстаў метад факусоўкі - дык гэта змяніць да KeyDown.
дададзена аўтар axel.michel, крыніца
@ ULLASMOHAN.V ведаць, што пры націску на поле, гэта не KeyDown падзея. Такім чынам, браўзэр паводзіць сябе карэктна пры ўводзе курсора пад тэкстам placehoder.
дададзена аўтар axel.michel, крыніца
Але ў кодзе (пры выкарыстанні мабільных прылад), калі мы арыентуемся ў тым, што тэкставае поле яго значэнне cleard. мне трэба яго cleard толькі тыпу што-то ..!
дададзена аўтар ULLAS MOHAN.V, крыніца
Ці магу я выкарыстаць замест націску клавішы фокусу ??
дададзена аўтар ULLAS MOHAN.V, крыніца
Калі я спрабую KeyDown; яго таксама не добра для майго патрабаванні :(
дададзена аўтар ULLAS MOHAN.V, крыніца

Як я ўжо казаў у каментарах вышэй, я буду працаваць з атрыбутам 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);
            }
        });
    }
})};

Вы можаце знайсці дэма .

0
дададзена
@ ULLASMOHAN.V ведаць, што пры націску на поле, гэта не KeyDown падзея. Такім чынам, браўзэр паводзіць сябе карэктна пры ўводзе курсора пад тэкстам placehoder.
дададзена аўтар axel.michel, крыніца
У выпадку, калі ваш мабільны браўзэр падтрымлівае атрыбут запаўняльніка, гэта, здаецца, па змаўчанні ў вашым браўзэры (тэставалі на Iphone з хромам, ён спусташаецца, калі вы ўводзіце што-то). У выпадку, калі вы знаходзіцеся ў запасным варыянце, я выкарыстаў метад факусоўкі - дык гэта змяніць да KeyDown.
дададзена аўтар axel.michel, крыніца
Але ў кодзе (пры выкарыстанні мабільных прылад), калі мы арыентуемся ў тым, што тэкставае поле яго значэнне cleard. мне трэба яго cleard толькі тыпу што-то ..!
дададзена аўтар ULLAS MOHAN.V, крыніца
Ці магу я выкарыстаць замест націску клавішы фокусу ??
дададзена аўтар ULLAS MOHAN.V, крыніца
Калі я спрабую KeyDown; яго таксама не добра для майго патрабаванні :(
дададзена аўтар ULLAS MOHAN.V, крыніца