《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浏览器需要在“选项”菜单中手动进行设置,才能显示效果。

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

相关文章
CV:基于keras利用cv2自带两步检测法对《跑男第六季第五期》之如花片段(或调用摄像头)进行实时性别&脸部表情检测
CV:基于keras利用cv2自带两步检测法对《跑男第六季第五期》之如花片段(或调用摄像头)进行实时性别&脸部表情检测
22 0
[cocos2dx-html5]手把手,快速搭建 Cocos2d-HTML5 开发调试环境
在这篇文章中,你将学会如何快速搭建 Cocos2d-HTML5 的开发和运行环境,对于脚本来说,大多编辑器提供语法高亮显示,而没有语义补全,虽然有些开发环境提供了自动补全功能,但都不大好用。
918 0
物联网设备安全开发利器,阿里云IoT固件安全检测帮您解忧固件安全风险
随着物联网的普及发展,出现越来趍多的设备。万物互联、设备多型多样,安全问题也随之不断地被暴露出来。固件是物联网设备的核心部分,一但被攻击,将影响终端设备的正常使用,或设备被控制利用,或泄露用户隐私。
183 0
CV:基于keras利用cv2自带两步检测法对《跑男第六季第五期》之如花片段(或调用摄像头)进行实时脸部表情检测
CV:基于keras利用cv2自带两步检测法对《跑男第六季第五期》之如花片段(或调用摄像头)进行实时脸部表情检测
24 0
推荐25款很棒的 HTML5 开发框架和开发工具【上篇】
  HTML5 在不同的领域让网页设计更强大的。快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5。HTML5 有许多新的特性功能,允许开发人员和设计师创建应用程序和网站,带给用户桌面应用程序的速度,性能和体验。
1004 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
11939
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载