社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
目錄
覆蓋默認瀏覽器行為
大多數現代瀏覽器，包括Chrome，Firefox，Safari和Edge。但是，Internet Explorer 9和更早版本中不支持它。您可以在網站上查看當前的瀏覽器兼容性，例如我可以使用。
，HTML5 DATALIST元素的樣式選項非常有限。下拉列表的外觀由瀏覽器控制，無法通過CSS自定義。但是，您可以為與數據師關聯的輸入字段進行樣式。
>我可以將多個數據師用於單個輸入字段嗎？
>我可以將HTML5 Datalist與其他輸入類型一起使用嗎？ ，HTML5 DataList可以與各種輸入類型一起使用，包括文本，搜索，電話，電子郵件，日期，月，每週，時間，時間，日期，本地，數字，範圍，範圍和顏色。但是，對某些輸入類型（例如範圍或顏色）的自動完成功能可能無法正常工作。
首頁 web前端 css教學 使用HTML5數據師輕量級自動完成控件

使用HTML5數據師輕量級自動完成控件

Jennifer Aniston
Jennifer Aniston
Feb 10, 2025 pm 03:18 PM

使用HTML5數據師輕量級自動完成控件

在本教程中，我們將深入了解少量使用的HTML5 元素。它可以實現不需要JavaScript的輕巧，易於訪問，跨瀏覽器自動完成的表單。

鑰匙要點

    html5`
  • `元素為自動完整的表單控件提供了輕巧，易於訪問和跨瀏覽器解決方案，而無需依賴JavaScript。 > `，````````````'>```````'
    • 瀏覽器對
  • `在包括Internet Explorer 10和11在內的現代瀏覽器中具有強大的功能，其中可用於舊瀏覽器的後備選項使用`>'和文本輸入的組合。 🎜> `元素不能直接用CSS來設計，該元素可以限制自定義，但可以確保在不同的瀏覽器和平台上保持一致性。
  • >諸如Ajax之類的增強功能可以與``>''>
  • 控件是理想的選擇。它們在以下情況時不太實用：
  • 有很多選擇，例如國家或職位標題
    • 用戶想要輸入自己的選項，該選項不在列表中>

明顯的解決方案是自動完成控制。這允許用戶輸入幾個字符，該字符限制了可快速選擇的選項。 >

與文本輸入結合使用。改編國家示例：
<span><span><span><datalist</span> id<span>="countrydata"</span>></span>
</span>  <span><span><span><option</span>></span>Afghanistan<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Åland Islands<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Albania<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Algeria<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>American Samoa<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Andorra<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Angola<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Anguilla<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Antarctica<span><span></option</span>></span>
</span>  ...etc...
<span><span><span></datalist</span>></span>
</span>
登入後複製
登入後複製
登入後複製
登入後複製

請參閱pen
html5 sitepoint（@sitepoint）
上的自動完成後返回。

>

在現代瀏覽器中，元素成為的一部分，而”或其他標籤未顯示。它看起來與上面的示例相同，但是鄉村的形式值將設置為一個空字符串。 在IE9及以下，（非常長的）盒子，
…您很容易！
可以將其視為正常的樣式，但是鏈接的及其子元素不能在CSS中進行樣式。列表渲染完全由平台和瀏覽器確定。

> 我希望這種情況能有所改善，但是目前，在MDN提出了一種解決方案，該解決方案：

覆蓋默認瀏覽器行為

>有效地對待

，因此可以在CSS 中進行樣式 重複JavaScript中的所有自動完整功能

>我已經進一步增強了它，並且代碼可在GitHub上使用。要使用它，請作為ES6模塊中的HTML頁面中的任何位置加載腳本。可以使用JSDELIVR CDN URL：

<span><span><span><datalist</span> id<span>="countrydata"</span>></span>
</span>  <span><span><span><option</span>></span>Afghanistan<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Åland Islands<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Albania<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Algeria<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>American Samoa<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Andorra<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Angola<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Anguilla<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Antarctica<span><span></option</span>></span>
</span>  ...etc...
<span><span><span></datalist</span>></span>
</span>
登入後複製
登入後複製
登入後複製
登入後複製

>，如果您使用的是捆綁器：，則可以使用NPM安裝它： 

<span><span><span><label</span> for<span>="country"</span>></span>country<span><span></label</span>></span>
</span>
<span><span><span><input</span> type<span>="text"</span>
</span></span><span>  <span>list<span>="countrydata"</span>
</span></span><span>  <span>id<span>="country"</span> name<span>="country"</span>
</span></span><span>  <span>size<span>="50"</span>
</span></span><span>  <span>autocomplete<span>="off"</span> /></span>
</span>
登入後複製
登入後複製
登入後複製
>您的元素必須使用 value 格式。例如：

<span><span><span><datalist</span> id<span>="mylist"</span>></span>
</span>  <span><span><span><option</span>></span>label one<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>label two<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>label three<span><span></option</span>></span>
</span><span><span><span></datalist</span>></span>
</span>
登入後複製
登入後複製
>

注意：無法使用，因為它會導致無法定型的空元素！ > 然後可以添加

CSS以樣式一些或全部和元素。例如：

<span><span><span><datalist</span> id<span>="mylist"</span>></span>
</span>  <span><span><span><option</span> value<span>="label one"</span> /></span>
</span>  <span><span><span><option</span> value<span>="label two"</span> /></span>
</span>  <span><span><span><option</span> value<span>="label three"</span> /></span>
</span><span><span><span></datalist</span>></span>
</span>
登入後複製
登入後複製
>示例：

>請參閱pen

html5 autocomplete css findling by sitepoint（@sitepoint）
> codepen。

>造型有效，但是值得付出努力嗎？

我不懷疑……

>

>重新實現瀏覽器的標準鍵盤，鼠標和触摸控件，並具有合理的可訪問性。 MDN示例不支持鍵盤事件，儘管我試圖改進該事件，但某些設備上不可避免地會有問題。
    >
  • >您依靠200行JavaScript來解決CSS問題。它的縮小為1.5kb，但是如果您在同一頁面上需要許多元素，則可能會引入性能問題。
  • 如果JavaScript是必需的，最好使用更漂亮，更一致，經過戰鬥測試的JavaScript組件？
  • >當JavaScript失敗時，控件返回到標準的HTML5 而無需樣式，但這是一個較小的好處。
    • >
創建AJAX-增強

>假定您的設計師很樂意接受瀏覽器樣式差異，可以使用JavaScript增強標準功能。例如：

實現可選驗證，該驗證僅接受。 中的已知值

set

以上是使用HTML5數據師輕量級自動完成控件的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

Windows 11 KB5054979中的新功能以及如何解決更新問題
4 週前 By DDD
如何修復KB5055523無法在Windows 11中安裝？
3 週前 By DDD
Inzoi：如何申請學校和大學
1 個月前 By DDD
如何修復KB5055518無法在Windows 10中安裝？
3 週前 By DDD
在哪裡可以找到Atomfall中的站點辦公室鑰匙
4 週前 By DDD
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7889
15
Java教學
1650
14
CakePHP 教程
1411
52
Laravel 教程
1302
25
PHP教程
1248
29
顯示更多
Related knowledge
VUE 3 VUE 3 Apr 02, 2025 pm 06:32 PM

它的出局！恭喜Vue團隊完成了完成，我知道這是一項巨大的努力，而且很長時間。所有新文檔也是如此。

您可以從瀏覽器獲得有效的CSS屬性值嗎？ 您可以從瀏覽器獲得有效的CSS屬性值嗎？ Apr 02, 2025 pm 06:17 PM

我有人寫了這個非常合法的問題。 Lea只是在博客上介紹瞭如何從瀏覽器中獲得有效的CSS屬性。那樣的是這樣。

在CI/CD上有點 在CI/CD上有點 Apr 02, 2025 pm 06:21 PM

我說的“網站”比“移動應用程序”更合適，但我喜歡Max Lynch的框架：

帶有粘性定位的堆疊卡和一點點的雜物 帶有粘性定位的堆疊卡和一點點的雜物 Apr 03, 2025 am 10:30 AM

前幾天，我發現了科里·金尼文（Corey Ginnivan）網站上的這一點，當您滾動時，彼此之間的卡片堆放集。

在WordPress塊編輯器中使用Markdown和本地化 在WordPress塊編輯器中使用Markdown和本地化 Apr 02, 2025 am 04:27 AM

如果我們需要直接在WordPress編輯器中向用戶顯示文檔，那麼最佳方法是什麼？

比較瀏覽器的響應式設計 比較瀏覽器的響應式設計 Apr 02, 2025 pm 06:25 PM

這些桌面應用程序中有許多目標是同時在不同的維度上顯示您的網站。因此，例如，您可以寫作

如何將CSS網格用於粘頭和頁腳 如何將CSS網格用於粘頭和頁腳 Apr 02, 2025 pm 06:29 PM

CSS網格是一系列屬性的集合，旨在使佈局比以往任何時候都容易。像任何東西一樣，那裡有一點學習曲線，但是網格是

Google字體可變字體 Google字體可變字體 Apr 09, 2025 am 10:42 AM

我看到Google字體推出了新設計（Tweet）。與上一次大型重新設計相比，這感覺更加迭代。我幾乎無法分辨出區別

See all articles