天天看点

《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 自动检测输入的拼音是否正确

继续阅读