首頁 > web前端 > css教學 > EnterKeyHint

EnterKeyHint

Christopher Nolan
發布: 2025-03-18 11:43:21
原創
109 人瀏覽過

EnterKeyHint

我只是最近才知道表單輸入上的EnterKeyHint屬性是一回事!對我來說,這似乎是一件大事,因為製作HTML形式標記是前端開發人員一生中的一個不錯的切片,並且幾乎每個輸入都可以使用此屬性(應該? )。

EnterKeyHint屬性更改移動鍵盤上的操作鍵,以更改文本/負擔。 Stefan Judis在2020年的推文中很好地說明了它:

所以,說我有這樣的形式:

 
  <label>
    姓名:
    <input type="“" text name="“">
  </label>
  <label>
    最喜歡的歌曲:
    <textarea name="“歌曲”"> </textarea>
  </label>
  保存
登入後複製

那裡的用戶體驗建議表格“保存”,但默認情況下,我手中的iPhone上,鍵盤中的藍色按鈕說……“去。”

那不是災難之類的東西,但是現在我有一些選擇該按鈕的選擇。我將從規格中竊取它,該規範稱它們為“輸入方式”:

作為一個認真的網絡專業人員,我還嘗試了EnterKeykint =“ Poop”,但是,可惜的是,瀏覽器並未尊重它。請注意,在Android上,操作按鈕不僅總是變成文本,而且使用圖標。因此,為了發送值,您將獲得一個小紙飛機圖標,而不是“發送”標籤。所以,是的,很明顯,便便應該變成?

對於上面的小表格示例…以某種方式輸入或完成的值對我來說比走得更好。如果我想更改它,我會為所有交互式元素添加屬性:

 
  <label>
    姓名:
    <input type="“" text name="“" enterkeyhint="“" douth>
  </label>
  <label>
    最喜歡的歌曲:
    <textarea name="“歌曲”" enterkeyhint="“" done> </textarea>
  </label>
  <button enterkeyhint="“" done>保存</button>
登入後複製

此屬性直接在表單輸入上,因此對於每個輸入,尤其是更長的表單,都會有點重複編寫它。但這確實使您有機會根據專注於哪些輸入來更改它。

我注意到保存不是一個有效的選項。這似乎很奇怪,因為感覺很多形式都會提供。也許Web平台不想提供告訴用戶無法執行的東西的東西?不過,我不確定是這樣,因為如果您放置下一個或上一個根本不會改變行為的情況,那麼如果您想做的是將重點放在下一個或以前的輸入中,則必須自己編碼。默認情況下,操作按鈕只是按照往常的方式提交表單。

我遇到了所有這些,因為Stefan最近在推特上說Firefox現在正在支持它,並為此功能提供了一套完整的支持。此功能僅與移動瀏覽器有關(或者我想是支持虛擬鍵盤的瀏覽器?),因此我想到了Firefox移動設備的存在。我已經習慣了這樣一個事實,所有瀏覽器都是iOS上的野生動物園(?)。但是在Android上,您可以使用“真實的” Firefox,這很好地提醒您,不僅存在不同的移動瀏覽器,而且不同的移動瀏覽器也具有不同的行為。

在此視頻中,我敢肯定,該視頻比EnterKeyHint的支持更重要,請注意虛擬鍵盤在專注於第一個輸入(並且無法直接提交)時如何自動為Next提供UI,但在第二個輸入(最後)(最後)操作中,該按鈕將變成提交按鈕(並且沒有“上一個”按鈕)。這與iOS明顯不同,iOS所提供的所有內容都是在鍵盤本身上方幾乎沒有上下箭頭的輸入之間導航。

總而言之,我們至少應該意識到的一個非常酷的功能,如果在大多數HTML表單上都不使用以匹配行為。

以上是EnterKeyHint的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板