🚀 go-pugleaf

W dniu 06-01-2011 14:40, Grzegorz Jakóbik pisze:
> Mam taki malutki problem zrobiłem sobie pole typu input w którym jest
> wpisane "Hasło" po najechaniu na to pole słowo "Hasło" znika i można
> wpisywać hasło z klawiatury. Tak więc na początku pole input ma typ TEXT
> a po kliknięciu na niego ma typ PASSWORD czyli nie widać literek i
> wszystko by działało ok, gdy nie jeden denerwujący problem że po zmianie
> typu z TEXT na PASSWORD kursor znika i znowu trzeba kliknąć na to
> okienko aby coś wpisać. Poniżej kod HTML/JAVASCRIPT:
>
> ---cut here---
> <script type="text/javascript">
> function setFocus()
> {
> document.getElementById("xyz").focus();
> }
>

Ten problem to w IE.

zamiast
document.getElementById("xyz").focus();

zrób
setTimeout(function() { document.getElementById('xyz').focus(); }, 10);

To ma związek z szybkością (problemem?) renderowania inputa w IE, focus 
wykonuje się zanim input zostanie wyrenderowany.
W FF i Operze document.getElementById("xyz").focus(); zadziała prawidłowo.

Pozdrawiam
Piotr

Witam dziękuję serdecznie za pomoc, działa wyśmienicie ale teraz pytanie jak
bym chciał to dalej rozbudować żeby po opuszczeniu pola gdy jest puste
skrypt
znowu zmieniał typ na text i zawartość na słowo "Hasło", kod wyglądał by
tak:

---cut here---
<script type="text/javascript">
function setFocus()
{
setTimeout(function() { document.getElementById('xyz').focus(); }, 10);
}

function zamien(id){
var e = document.getElementById(id);
var n = document.createElement('input');
n.type = e.type.toLowerCase() == 'password' ? 'text' : 'password';
n.name = e.name;
n.value = e.value;
n.id = e.id;
e.parentNode.replaceChild(n, e);
setFocus();
}
</script>
<form>
<p>
<input type="text" name="Haslo" id="xyz" value="Has&#322;o:"
onFocus="if(this.value=='Has&#322;o:'){this.value='';} zamien('xyz');"
onBlur="if(this.value==''){this.value='Has&#322;o:'; zamien('xyz');}"/>
</p>
</form>
---cut here---

I teraz pierwsza cześć działa bez problemu a OnBlur wogóle ? dlaczego ? Gdy
wywale z tego kodu wogóle funkcję zamien('xyz'); wszystko chodzi niby ok
poza tym że nie zmienia typu pola, czyli mój wniosek samo OnBlur jest
poprawne więc w
czym problem ?

Jeśli jeszcze ostatni raz mogę prosić kogośo pomoc będę głęboko wdzięczny.

Pozdrawiam

G.J.

W dniu 2011-01-07 17:42, Grzegorz Jakóbik pisze:
> Witam dziękuję serdecznie za pomoc, działa wyśmienicie ale teraz pytanie
> jak
> bym chciał to dalej rozbudować żeby po opuszczeniu pola gdy jest puste
> skrypt
> znowu zmieniał typ na text i zawartość na słowo "Hasło", kod wyglądał by
> tak:
>
> ---cut here---
> <script type="text/javascript">
> function setFocus()
> {
> setTimeout(function() { document.getElementById('xyz').focus(); }, 10);
> }
>
> function zamien(id){
> var e = document.getElementById(id);
> var n = document.createElement('input');
> n.type = e.type.toLowerCase() == 'password' ? 'text' : 'password';
> n.name = e.name;
> n.value = e.value;
> n.id = e.id;
> e.parentNode.replaceChild(n, e);
> setFocus();
> }
> </script>
> <form>
> <p>
> <input type="text" name="Haslo" id="xyz" value="Has&#322;o:"
> onFocus="if(this.value=='Has&#322;o:'){this.value='';} zamien('xyz');"
> onBlur="if(this.value==''){this.value='Has&#322;o:'; zamien('xyz');}"/>
> </p>
> </form>
> ---cut here---
>
> I teraz pierwsza cześć działa bez problemu a OnBlur wogóle ? dlaczego ? Gdy
> wywale z tego kodu wogóle funkcję zamien('xyz'); wszystko chodzi niby ok
> poza tym że nie zmienia typu pola, czyli mój wniosek samo OnBlur jest
> poprawne więc w
> czym problem ?
>
> Jeśli jeszcze ostatni raz mogę prosić kogośo pomoc będę głęboko wdzięczny.

Zrób to porządnie:
http://www.alistapart.com/articles/makingcompactformsmoreaccessible

-- 
Peter

Witam

Owszem rozwiązanie które proponujesz działa ale inną metodą nakladania się 
divami a to nie do końca mi odpowiada. Ponad to nie wiem dlaczego piszesz 
zrób to porządnie czy coś w moim skrpcie jest nieporządnie ? Dużo mniej 
linijek i bez DIV-ów

Zadaje sobie pytanie tylko dlaczego nie działa mi onBlur ? które nadal 
pozostaje bez odpowiedzi ?

Pozdrawiam

G.J. 

W dniu 2011-01-12 00:22, Grzegorz Jakóbik pisze:
> Witam
>
> Owszem rozwiązanie które proponujesz działa ale inną metodą nakladania
> się divami a to nie do końca mi odpowiada. Ponad to nie wiem dlaczego
> piszesz zrób to porządnie czy coś w moim skrpcie jest nieporządnie ?
> Dużo mniej linijek i bez DIV-ów

1. Atrybuty pisz małymi literami. Zamiast onFocus pisz onfocus.
2. Nie mieszaj kodu, np. JS z HTML. Zrób kod JS w oddzielnym pliku.
3. Sprawdź, jak zadziała Twoje rozwiązanie bez włączonego lub 
niedostępnego JavaScript-u.
4. div to zwykły element blokowy i równie dobrze zamiast niego może być 
inny element. Nie ma on nic tu do rzeczy.

> Zadaje sobie pytanie tylko dlaczego nie działa mi onBlur ? które nadal
> pozostaje bez odpowiedzi ?

W funkcji zamien masz na końcu setFocus(); Tę samą funkcję zamien 
wywołujesz przy zdarzeniu onblur, a która to na końcu ustawia focus. I 
tak w kółko. Pytanie: po co zmieniasz typ input-a? I co chcesz przez to 
osiągnąć?

-- 
Peter

W dniu 2011-01-12 14:54, Peter May pisze:
> Pytanie: po co zmieniasz typ input-a? I co chcesz przez to osiągnąć?

Nie chciało się zaglądnąć do pierwszego posta? ;]
Emuluje placeholdera z HTML5 dla pola z hasłem.


-- 
message[autor="PablO"]::after {
	content:"Pozdrawiam";
}

W dniu 2011-01-13 00:13, Paweł Piskorz pisze:
> W dniu 2011-01-12 14:54, Peter May pisze:
>> Pytanie: po co zmieniasz typ input-a? I co chcesz przez to osiągnąć?
>
> Nie chciało się zaglądnąć do pierwszego posta? ;]

Zajrzałem. :-)

> Emuluje placeholdera z HTML5 dla pola z hasłem.

Ale w sposób mało elegancki. A poza tym nadal nie rozumiem po co bawić 
się w zmiany typu input-a? Dziwolągi i przekombinowane. Emulowanie 
placeholder-a z html5 jest dość banalne i w gruncie rzeczy sprowadza się 
tylko do ustawienia dla position relative dla elementu nadrzędnego, 
<label>-a position absolute i skorygowaniu pozycji <label>-a przy 
odpowiednim zdarzeniu. Można pójść dalej i zastosować powyższe dopiero 
po wykryciu czy przeglądarka nie obsługuje natywnie placeholder-a. A nie 
robić to w sposób, jaki wątkotwórca przedstawił :P

Z resztą w artykule ALA jest to opisane ładnie.

-- 
Peter

> 1. Atrybuty pisz małymi literami. Zamiast onFocus pisz onfocus.
> 2. Nie mieszaj kodu, np. JS z HTML. Zrób kod JS w oddzielnym pliku.
> 3. Sprawdź, jak zadziała Twoje rozwiązanie bez włączonego lub 
> niedostępnego JavaScript-u.
> 4. div to zwykły element blokowy i równie dobrze zamiast niego może być 
> inny element. Nie ma on nic tu do rzeczy.

Zmiana atrybutów na małe litery nie jest tu akurat powodem nie działania 
tego o co pytam, poza tym bez znaczenia ma czy JS jest w jednym pliku czy w 
osobnym na razie testuje moje rozwiązanie, więc nie widzę powodu żeby 
utrudniać ludzom chcącym mi pomoć aby musieli generowac 100 plików

>> Zadaje sobie pytanie tylko dlaczego nie działa mi onBlur ? które nadal
>> pozostaje bez odpowiedzi ?
>
> W funkcji zamien masz na końcu setFocus(); Tę samą funkcję zamien 
> wywołujesz przy zdarzeniu onblur, a która to na końcu ustawia focus. I tak 
> w kółko. Pytanie: po co zmieniasz typ input-a? I co chcesz przez to 
> osiągnąć?

setfocus ustawiam po to aby po zmianie typu pola z text na password kursor 
nadal pozostawał tam gdzie trzeba a nie okno traciło swoją aktywność 
wystarczyło przeczytać sobie posty od początku albo po prostu wkleić kod 
który zaczyna się od ---cut here--- i koczy się tym samym u go sobie 
uruchomić.

Zmiany na małe litery problemu nie rozwiązują, wycięcie funkcji setFocus(); 
też niczego nie zmienia w działau onblur, tak więc nie tu lerzy problem.
Jeśli masz chęć mi pomoć, zrób to proszę a nie traćmy czas na głupie wywody 
co i jak jest bardziej elegancko.

Ja osobiście uważam że metodę którą mi podałeś owszem działa ale jest jak 
dal mnie nie elegancka bo gdy robimy w przeglądarce czy to FF czy IE 
najnowszych wersjach REFLESH okienka przeskakują na ułamek sekundy to mi się 
jakoś bardzo nie podoba, a wynika to z tego że stosowana jest tam 
przesunięcie pola które dopiero sktutkuje po załadowaniu całej strony.

G.J. 

W dniu 2011-01-13 01:05, Peter May pisze:
> A poza tym nadal nie rozumiem po co bawić
> się w zmiany typu input-a?

Żeby było widać tekst a nie *

> Emulowanie
> placeholder-a z html5 jest dość banalne i w gruncie rzeczy sprowadza się
> tylko do ustawienia dla position relative dla elementu nadrzędnego,
> <label>-a position absolute

No chyba że ktoś chce mieć i labela i placeholder ;)

> Z resztą w artykule ALA jest to opisane ładnie.

Dzięki za linka.


-- 
message[autor="PablO"]::after {
	content:"Pozdrawiam";
}