enterkeyhint
Zmienia napis lub ikonę klawisza Enter na klawiaturze ekranowej, np. na „Szukaj”, „Wyślij” albo „Dalej”.
- Dotyczy
- Pola formularzy
<input>i<textarea>oraz elementy zcontenteditable
Przykład
#<style>
#chat { list-style: none; margin: 0 0 12px; padding: 0; }
#chat li {
width: fit-content;
margin-bottom: 6px;
padding: 6px 10px;
border-radius: 10px;
background: #1f1f23;
}
</style>
<ul id="chat">
<li>Mentor: Jak idzie zadanie z pętlą for?</li>
</ul>
<form onsubmit="
event.preventDefault();
const item = document.createElement('li');
item.textContent = 'Ty: ' + this.elements.message.value;
document.getElementById('chat').append(item);
this.reset();
">
<input name="message" enterkeyhint="send" required
placeholder="Napisz odpowiedź i naciśnij Enter" aria-label="Wiadomość do mentora">
</form>Na telefonie klawisz Enter zamieni się w „Wyślij”. Samo wysłanie zapewnia formularz: Enter w jego jedynym polu uruchamia zdarzenie submit, a skrypt dopisuje wiadomość do czatu. Na komputerze Enter działa tak samo, tylko bez zmiany wyglądu klawisza.
Definicja i zastosowanie
#Atrybut enterkeyhint decyduje, jak wygląda klawisz Enter na klawiaturze ekranowej telefonu lub tabletu. Zamiast ogólnej strzałki klawisz może pokazać napis albo ikonę, która zapowiada, co się stanie po jego naciśnięciu: „Szukaj” w wyszukiwarce, „Wyślij” w czacie, „Dalej” w formularzu z kilkoma polami.
Atrybut zmienia tylko wygląd klawisza, a nie jego działanie. Po naciśnięciu strona dostaje zwykłe zdarzenie klawisza Enter, więc to, co ma się wydarzyć, zapewniasz sam. W formularzu z polem jednowierszowym Enter wyśle formularz bez dodatkowego kodu, ale przejście do następnego pola czy wysłanie wiadomości z <textarea> wymaga skryptu.
Na komputerze z fizyczną klawiaturą nie zobaczysz żadnej różnicy. Dokładny napis lub ikonę dobiera system telefonu, więc ta sama wartość może wyglądać trochę inaczej na iPhonie i na Androidzie.
Składnia
#<element enterkeyhint="enter | done | go | next | previous | search | send">…</element>Wartości
#enter
Standardowy Enter, który najczęściej wstawia nową linię.done
Koniec wpisywania. Zwykle oznacza, że klawiatura może się schować.go
Przejście do celu, np. pod wpisany adres.next
Przejście do następnego pola formularza.previous
Powrót do poprzedniego pola formularza.search
Wyszukanie wpisanej frazy.send
Wysłanie wiadomości, np. w czacie albo komentarzu.
Obsługa przeglądarek
#Szeroko dostępne · od 2021 roku
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Dobieraj wartość do tego, co naprawdę zrobi Enter. Klawisz „Wyślij”, który tylko wstawia nową linię, wprowadza w błąd.
- W
<textarea>Enter domyślnie dodaje nową linię. Jeśli ma wysyłać wiadomość, obsłuż zdarzeniekeydowni dopiero wtedy ustawenterkeyhint="send".
Powiązane hasła
#- inputmodePodpowiada, jaką klawiaturę ekranową pokazać: z cyframi, z przecinkiem, telefoniczną, do adresu e-mail albo żadną.
- autocapitalizeMówi klawiaturze ekranowej, kiedy pisać wielką literą: nigdy, na początku zdania, na początku słowa albo zawsze.
- <input>Pole formularza: tekst, e-mail, hasło, liczba, data, suwak, pole wyboru, plik i wiele innych.
- <textarea>Wielowierszowe pole tekstowe na dłuższe wypowiedzi: wiadomości, opinie, opisy.
- <form>Formularz, który zbiera dane od użytkownika i wysyła je pod wskazany adres.
Widzisz błąd albo brakuje przykładu? Napisz do nas.