《HTML5 开发实例大全》——1.28 自动检测输入的拼音是否正确-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

《HTML5 开发实例大全》——1.28 自动检测输入的拼音是否正确

简介:

本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章,第1.28节,作者: 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.28 自动检测输入的拼音是否正确


44501c9b2730822fef2bf8493709209503fdf2ab

实例说明

在HTML 5 中,使用属性“spellcheck”可以检测文本框或输入框中输入的拼音或语法是否正确,该属性的值为布尔值“true”或“false”。如果为“true”,则检测对应输入框中的语法;反之,则不检测。

在本实例中,分别创建两个< textarea >输入框元素。第一个元素将“spellcheck”属性设置为“true”,表示需要语法检测;将另外一个元素的“spellcheck”属性设置为“false”,表示不需要语法检测。这样当分别在两个输入框中录入文字时,可以显示不同的检测效果。

具体实现

使用Dreamweaver创建一个名为“028.html”的文件,具体代码如下所示:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>spellcheck属性的使用</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
 <h5>输入框中语法检测属性</h5>
 <p>需要检测<br/>
  <textarea spellcheck="true" 
       class="inputtxt"></textarea>
 </p>
 <p>不需要检测<br/>
  <textarea spellcheck="false" 
       class="inputtxt"></textarea>
 </p>
</body>
</html>

在上述代码中,为了形成对比效果,特意将第一个< textarea >输入框元素中的“spellcheck”属性设置为“true”值,将第二个< textarea >输入框元素中的“spellcheck”属性设置为 “false”值。可以在两个输入框中输入同样的错误内容,第一个输入框中的内容显示出错的红色波浪线,第二个输入框没有任何提示,表明第一个< textarea >输入框中设置的“spellcheck”属性值已生效,执行效果如图1-48所示。


9aea21ff52bbdb0bd3699991135eff27da7ac3df

注意

在HTML 5中,虽然各浏览器对“spellcheck”属性进行了很好的支持,但各浏览器支持的元素是有差异的。在Chrome浏览器中,支持< textarea >输入框元素,而不支持< input >元素中的文本框;Firefox、Opera浏览器需要在“选项”菜单中手动进行设置,才能显示效果。


9aea21ff52bbdb0bd3699991135eff27da7ac3df

注意

在HTML 5中,虽然各浏览器对“spellcheck”属性进行了很好的支持,但各浏览器支持的元素是有差异的。在Chrome浏览器中,支持< textarea >输入框元素,而不支持< input >元素中的文本框;Firefox、Opera浏览器需要在“选项”菜单中手动进行设置,才能显示效果。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章