天天看點

《HTML5 開發執行個體大全》——1.28 自動檢測輸入的拼音是否正确

本節書摘來自異步社群《html5 開發執行個體大全》一書中的第1章,第1.28節,作者: 張明星 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

《HTML5 開發執行個體大全》——1.28 自動檢測輸入的拼音是否正确

執行個體說明

在html 5 中,使用屬性“spellcheck”可以檢測文本框或輸入框中輸入的拼音或文法是否正确,該屬性的值為布爾值“true”或“false”。如果為“true”,則檢測對應輸入框中的文法;反之,則不檢測。

在本執行個體中,分别建立兩個< textarea >輸入框元素。第一個元素将“spellcheck”屬性設定為“true”,表示需要文法檢測;将另外一個元素的“spellcheck”屬性設定為“false”,表示不需要文法檢測。這樣當分别在兩個輸入框中錄入文字時,可以顯示不同的檢測效果。

具體實作

使用dreamweaver建立一個名為“028.html”的檔案,具體代碼如下所示:

在上述代碼中,為了形成對比效果,特意将第一個< textarea >輸入框元素中的“spellcheck”屬性設定為“true”值,将第二個< textarea >輸入框元素中的“spellcheck”屬性設定為 “false”值。可以在兩個輸入框中輸入同樣的錯誤内容,第一個輸入框中的内容顯示出錯的紅色波浪線,第二個輸入框沒有任何提示,表明第一個< textarea >輸入框中設定的“spellcheck”屬性值已生效,執行效果如圖1-48所示。

《HTML5 開發執行個體大全》——1.28 自動檢測輸入的拼音是否正确

注意

在html 5中,雖然各浏覽器對“spellcheck”屬性進行了很好的支援,但各浏覽器支援的元素是有差異的。在chrome浏覽器中,支援< textarea >輸入框元素,而不支援< input >元素中的文本框;firefox、opera浏覽器需要在“選項”菜單中手動進行設定,才能顯示效果。

《HTML5 開發執行個體大全》——1.28 自動檢測輸入的拼音是否正确

繼續閱讀