$(document).ready(function() {
// #login-box password field
$('#password').attr('type', 'text');
$('#password').val('Password');
});
Ma to zmienić #password
pole wejściowe (z id="password"
), które jest type
password
na normalne pole tekstowe, a następnie wypełnić tekst „Hasło”.
Ale to nie działa. Czemu?
Oto formularz:
<form enctype="application/x-www-form-urlencoded" method="post" action="/auth/sign-in">
<ol>
<li>
<div class="element">
<input type="text" name="username" id="username" value="Prihlasovacie meno" class="input-text" />
</div>
</li>
<li>
<div class="element">
<input type="password" name="password" id="password" value="" class="input-text" />
</div>
</li>
<li class="button">
<div class="button">
<input type="submit" name="sign_in" id="sign_in" value="Prihlásiť" class="input-submit" />
</div>
</li>
</ol>
</form>
javascript
jquery
html-input
Richard Knop
źródło
źródło
Odpowiedzi:
Jest bardzo prawdopodobne, że ta czynność zostanie uniemożliwiona w ramach modelu bezpieczeństwa przeglądarki.
Edycja: rzeczywiście, testując teraz w Safari, otrzymuję błąd
type property cannot be changed
.Edycja 2: wydaje się, że jest to błąd prosto z jQuery. Użycie następującego prostego kodu DOM działa dobrze:
Edycja 3: Prosto ze źródła jQuery, wydaje się, że jest to związane z IE (i może to być błąd lub część ich modelu bezpieczeństwa, ale jQuery nie jest specyficzny):
źródło
attr
ale umożliwia zmianętype
atrybutuinput
elementów.Jeszcze łatwiej ... nie ma potrzeby tworzenia całego elementu dynamicznego. Wystarczy utworzyć dwa oddzielne pola, z których jedno będzie „prawdziwym” polem hasła (typ = „hasło”), a drugim „fałszywym” polem hasła (typ = „tekst”), ustawiając tekst w fałszywym polu na jasnoszary kolor i ustawienie wartości początkowej na „Hasło”. Następnie dodaj kilka wierszy Javascript za pomocą jQuery, jak poniżej:
Kiedy użytkownik wejdzie w pole „fałszywego” hasła, zostanie ono ukryte, pokazane zostanie rzeczywiste pole, a fokus zostanie przeniesiony na prawdziwe pole. Nigdy nie będą mogli wpisać tekstu w fałszywym polu.
Kiedy użytkownik opuści prawdziwe pole hasła, skrypt sprawdzi, czy jest puste, a jeśli tak, ukryje prawdziwe pole i wyświetli fałszywe.
Uważaj, aby nie pozostawić spacji między dwoma elementami wejściowymi, ponieważ IE ustawi jeden po drugim (renderowanie spacji), a pole będzie się poruszać, gdy użytkownik wejdzie / wyjdzie z niego.
źródło
$('#password').show(); $('#password').focus();
$('#password').show().focus();
Jednoetapowe rozwiązanie
źródło
document.getElementById
powinno wystarczyć i nie potrzebujesz do tego jQuery! ;-)W dzisiejszych czasach możesz po prostu używać
Ale oczywiście powinieneś to po prostu zrobić
we wszystkich oprócz IE. Istnieją również podkładki zastępcze, które naśladują tę funkcjonalność również w IE.
źródło
placeholder="Password"
. Specyfikacja HTML i MDN tegoplaceholder
atrybutu. JavaScript adapter doplaceholder
.Więcej rozwiązań dla różnych przeglądarek… Mam nadzieję, że sedno tego pomaga komuś tam.
To rozwiązanie próbuje ustawić
type
atrybut, a jeśli się nie powiedzie, po prostu tworzy nowy<input>
element, zachowując atrybuty elementu i procedury obsługi zdarzeń.changeTypeAttr.js
( GitHub Gist ):źródło
To działa dla mnie.
źródło
Najlepszy sposób na użycie jQuery:
Pozostaw oryginalne pole wprowadzania ukryte na ekranie.
Utwórz nowe pole wprowadzania w locie za pomocą JavaScript.
Przeprowadź migrację identyfikatora i wartości z ukrytego pola wejściowego do nowego pola wejściowego.
Aby obejść błąd w IE jak
type property cannot be changed
, może się to przydać jako poniżej:Dołącz zdarzenie click / focus / change do nowego elementu wejściowego, aby wyzwolić to samo zdarzenie na ukrytym wejściu.
Stary ukryty element wejściowy nadal znajduje się w DOM, więc zareaguje na zdarzenie wywołane przez nowy element wejściowy. Podczas zamiany ID nowy element wejściowy będzie działał jak stary i reaguje na każde wywołanie funkcji na identyfikator starego ukrytego wejścia, ale wygląda inaczej.
źródło
Próbowałeś użyć .prop ()?
http://api.jquery.com/prop/
źródło
Nie testowałem w IE (ponieważ potrzebowałem tego na stronie na iPada) - formularza nie mogłem zmienić HTML, ale mogłem dodać JS:
(Old school JS jest brzydki obok wszystkich jQuery!)
Ale http://bugs.jquery.com/ticket/1957 prowadzi do MSDN: „Począwszy od Microsoft Internet Explorer 5 właściwość type jest odczytywana / zapisywana raz, ale tylko wtedy, gdy element wejściowy jest tworzony za pomocą metody createElement i zanim zostanie dodany do dokumentu. ” więc może zduplikujesz element, zmienisz typ, dodasz do DOM i usuniesz stary?
źródło
Wystarczy utworzyć nowe pole, aby ominąć tę kwestię bezpieczeństwa:
źródło
Otrzymałem ten sam komunikat o błędzie podczas próby wykonania tego w przeglądarce Firefox 5.
Rozwiązałem go za pomocą poniższego kodu:
Aby z niego skorzystać, wystarczy ustawić atrybuty onFocus i onBlur swoich pól na coś takiego:
Używam tego również w polu nazwy użytkownika, więc przełącza wartość domyślną. Po prostu ustaw drugi parametr funkcji na „”, kiedy ją wywołujesz.
Warto również zauważyć, że domyślnym typem pola mojego hasła jest hasło, na wypadek, gdyby użytkownik nie włączył javascript lub jeśli coś pójdzie nie tak, jego hasło jest nadal chronione.
Funkcja $ (dokument) .ready to jQuery i ładuje się po zakończeniu ładowania dokumentu. To następnie zmienia pole hasła na pole tekstowe. Oczywiście będziesz musiał zmienić 'password_field_id' na identyfikator pola swojego hasła.
Zachęcamy do korzystania i modyfikowania kodu!
Mam nadzieję, że to pomoże wszystkim, którzy mieli ten sam problem, co ja :)
- CJ Kent
EDYCJA: Dobre rozwiązanie, ale nie absolutne. Działa na FF8 i IE8, ALE nie w pełni w Chrome (16.0.912.75 ver). Chrome nie wyświetla tekstu hasła podczas ładowania strony. Ponadto - FF wyświetli twoje hasło po włączeniu autouzupełniania.
źródło
Proste rozwiązanie dla wszystkich, którzy chcą funkcjonalności we wszystkich przeglądarkach:
HTML
jQuery
źródło
To zadziałało dla mnie.
źródło
Właściwości typu nie można zmienić, należy zastąpić lub nałożyć dane wejściowe na tekst i przesłać wartość na hasło wprowadzone podczas wysyłania.
źródło
Myślę, że możesz użyć obrazu tła zawierającego słowo „hasło” i zmienić go z powrotem na pusty obraz tła
.focus()
..blur()
----> obraz z „hasłem”.focus()
-----> obraz bez „hasła”Możesz to również zrobić za pomocą CSS i jQuery. Niech pole tekstowe pokaże się dokładnie nad polem hasła, hide () jest na focus () i skupi się na polu hasła ...
źródło
Wypróbuj to
Demo jest tutaj
źródło
Działa o wiele łatwiej:
i aby ponownie zmienić go w pole hasła ( zakładając, że pole hasła jest drugim znacznikiem wejściowym z typem tekstu ):
źródło
użyj tego jest bardzo łatwe
źródło
źródło
źródło
To załatwi sprawę. Chociaż można to poprawić, ignorując atrybuty, które są obecnie nieistotne.
Podłącz:
Stosowanie:
Skrzypce:
http://jsfiddle.net/joshcomley/yX23U/
źródło
Po prostu to:
Jak na przykład
Zakłada się, że pole wejściowe zostało wcześniej ustawione na „tekst”.
źródło
Oto mały fragment, który pozwala zmieniać
type
elementy w dokumentach.jquery.type.js
( GitHub Gist ):Obejście problemu polega na usunięciu
input
z dokumentu, zmianietype
a następnie umieszczając z powrotem w miejscu, w którym był pierwotnie.Pamiętaj, że ten fragment kodu został przetestowany tylko dla przeglądarek WebKit - bez żadnych gwarancji!
źródło
delete jQuery.attrHooks.type
aby usunąć specjalną obsługę typów wejściowych przez jQuery.Oto metoda, która wykorzystuje obraz obok pola hasła do przełączania między wyświetlaniem hasła (wprowadzanie tekstu) a niewidzeniem (wprowadzanie hasła). Używam obrazu „otwartego oka” i „zamkniętego oka”, ale możesz użyć tego, co ci odpowiada. Jego działanie polega na dwóch wejściach / obrazach i po kliknięciu obrazu wartość jest kopiowana z widocznego wejścia do ukrytego, a następnie ich widoczność jest zamieniana. W przeciwieństwie do wielu innych odpowiedzi, które używają nazw zakodowanych na stałe, ta jest na tyle ogólna, że można jej użyć wiele razy na stronie. Psunie się również z gracją, jeśli JavaScript jest niedostępny.
Oto jak dwa z nich wyglądają na stronie. W tym przykładzie hasło A zostało ujawnione poprzez kliknięcie na jego oku.
źródło
Podoba mi się w ten sposób, aby zmienić typ elementu wejściowego: old_input.clone () .... Oto przykład. Jest pole wyboru „id_select_multiple”. Jeśli zmieni się to na „wybrane”, elementy wejściowe o nazwie „foo” należy zmienić, aby zaznaczyć pola wyboru. Jeśli nie zostanie zaznaczona, powinny one ponownie stać się przyciskami opcji.
źródło
oto rozwiązanie DOM
źródło
Utworzyłem rozszerzenie jQuery do przełączania między tekstem a hasłem. Działa w IE8 (prawdopodobnie również 6 i 7, ale nie przetestowano) i nie straci wartości ani atrybutów:
Działa jak marzenie. Możesz po prostu zadzwonić,
$('#element').togglePassword();
aby przełączać się między nimi lub dać opcję „wymuszenia” akcji na podstawie czegoś innego (np. Pola wyboru):$('#element').togglePassword($checkbox.prop('checked'));
źródło
To kolejna opcja dla wszystkich miłośników IE8, która działa idealnie w nowszych przeglądarkach. Możesz po prostu pokolorować tekst, aby dopasować go do tła wejścia. Jeśli masz pojedyncze pole, zmienisz kolor na czarny po kliknięciu / skupieniu się na polu. Nie używałbym tego na stronie publicznej, ponieważ „myliłby” większość ludzi, ale używam go w sekcji ADMIN, w której tylko jedna osoba ma dostęp do haseł użytkowników.
-LUB-
To, również potrzebne, zmieni tekst z powrotem na biały, gdy opuścisz pole. Prosty, prosty, prosty.
[Inna opcja] Teraz, jeśli masz kilka pól, które sprawdzasz, wszystkie o tym samym identyfikatorze, jak ja go używam, dodaj klasę „pass” do pól, w których chcesz ukryć tekst. Ustaw wpisz hasło w polu „tekst”. W ten sposób zostaną zmienione tylko pola z klasą „pass”.
Oto druga część tego. Spowoduje to zmianę tekstu z powrotem na biały po opuszczeniu pola.
źródło
Właśnie zmieniłem typ danych wejściowych:
i to działa.
Musiałem to zrobić, ponieważ korzystałem z jQuery UI datepickers 'w projekcie ASP NET Core 3.1 i nie działały one poprawnie w przeglądarkach Chromium (patrz: https://stackoverflow.com/a/61296225/7420301 ).
źródło