社群
學習
工具庫
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

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

顯示更多

熱門文章

如何修復KB5055523無法在Windows 11中安裝？
4 週前 By DDD
如何修復KB5055518無法在Windows 10中安裝？
4 週前 By DDD
<🎜>：種植花園 - 完整的突變指南
3 週前 By DDD
<🎜>：泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
如何修復KB5055612無法在Windows 10中安裝？
3 週前 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)

顯示更多

熱門話題

Java教學
1664
14
CakePHP 教程
1422
52
Laravel 教程
1316
25
PHP教程
1267
29
C# 教程
1239
24
顯示更多
Related knowledge
Google字體可變字體 Google字體可變字體 Apr 09, 2025 am 10:42 AM

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

如何使用HTML，CSS和JavaScript創建動畫倒計時計時器 如何使用HTML，CSS和JavaScript創建動畫倒計時計時器 Apr 11, 2025 am 11:29 AM

您是否曾經在項目上需要一個倒計時計時器？對於這樣的東西，可以自然訪問插件，但實際上更多

HTML數據屬性指南 HTML數據屬性指南 Apr 11, 2025 am 11:50 AM

您想了解的有關HTML，CSS和JavaScript中數據屬性的所有信息。

使Sass更快的概念證明 使Sass更快的概念證明 Apr 16, 2025 am 10:38 AM

在一個新項目開始時，Sass彙編發生在眼睛的眨眼中。感覺很棒，尤其是當它與browsersync配對時，它重新加載

我們如何創建一個在SVG中生成格子呢模式的靜態站點 我們如何創建一個在SVG中生成格子呢模式的靜態站點 Apr 09, 2025 am 11:29 AM

格子呢是一塊圖案布，通常與蘇格蘭有關，尤其是他們時尚的蘇格蘭語。在Tar​​tanify.com上，我們收集了5,000多個格子呢

如何在WordPress主題中構建VUE組件 如何在WordPress主題中構建VUE組件 Apr 11, 2025 am 11:03 AM

內聯式模板指令使我們能夠將豐富的VUE組件構建為對現有WordPress標記的逐步增強。

當您看上去時，CSS梯度變得更好 當您看上去時，CSS梯度變得更好 Apr 11, 2025 am 09:16 AM

我關注的一件事是Lea Verou＆＃039; s conic-Gradient（）Polyfill的功能列表是最後一項：

靜態表單提供商的比較 靜態表單提供商的比較 Apr 16, 2025 am 11:20 AM

讓我們嘗試在這裡造成一個術語：“靜態表單提供商”。你帶上html

See all articles