用CSS禁用输入法(CSS3 UI规范)实例解析


Posted in HTML / CSS onDecember 04, 2012

禁用输入法属性ime-mode是CSS3中最新添加的属性,更准确点说,是CSS Basic User Interface Module Level 3 (CSS3 UI)规范新添加的属性。但是IE浏览器从IE5开始就支持该属性,FireFox浏览器从FireFox3.0开始也支持该ime-mode属性。不过chrome、opera、Safari浏览器还没有开始支持该属性。该属性可以控制文本字段的输入法编辑器的状态:

名称: ime-mode
值: auto | normal | active | inactive | disabled | inherit
初始值: auto
应用元素: text fields(文本字段)
继承性: no

auto : 默认值,不影响当前输入法编辑器的状态
normal : 输入法编辑器的状态应该是normal,这个值可以用于用户样式表来覆盖页面的设置。IE浏览器不支持该属性
active : 输入法编辑器的状态初始时是激活的;输入将一直使用该输入法直到用户切换输入法。该属性在Linux操作系统下不支持
inactive : 输入法编辑器的状态初始时是非激活状态;除非用户激活输入法
disabled : 禁用输入法编辑器;该输入法编辑器也许不会被用户激活
实例
复制代码
代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<style type="text/css">
input {ime-mode: disabled; }
</style>
</head>
<body>
<form name="form1" method="post" action="">
<input type="text" name="textfield">
</form>
</body>
</html>

上面的例子在IE5+或者FireFox3+浏览器中运行,不允许输入中文。
这个属性虽然很强大,但是在最新版的chrome、opera、safari浏览器中都不支持该属性,所以在这些浏览器中还需要通过JavaScript来实现当用户输入中文时无法输入到文本框中。
HTML / CSS 相关文章推荐
CSS3教程(5):网页背景图片
Apr 02 HTML / CSS
表单button的outline在firefox浏览器下的问题
Dec 24 HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
Sep 14 HTML / CSS
Html5实现单张、多张图片上传功能
Apr 28 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
24个canvas基础知识小结
Dec 17 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
Jan 27 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
Apr 29 HTML / CSS
html5 css3 动态气泡按钮实例演示
Dec 02 #HTML / CSS
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 #HTML / CSS
CSS3悬停效果案例应用
Nov 21 #HTML / CSS
在css3中background-clip属性与background-origin属性的用法介绍
Nov 13 #HTML / CSS
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
Nov 13 #HTML / CSS
css3绘制天猫logo实现代码
Nov 06 #HTML / CSS
CSS3实现DIV圆角效果完整代码
Oct 10 #HTML / CSS
You might like
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
javascript Keycode对照表
2009/10/24 Javascript
js转义字符介绍
2013/11/05 Javascript
javascript禁用Tab键脚本实例
2013/11/22 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
Express框架之connect-flash详解
2017/05/31 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
详解vue 组件注册
2020/11/20 Vue.js
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
Python读取实时数据流示例
2019/12/02 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
python 实现网易邮箱邮件阅读和删除的辅助小脚本
2021/03/01 Python
党校培训自我鉴定范文
2014/03/20 职场文书
广告艺术设计专业自荐书
2014/07/08 职场文书
名人演讲稿范文
2014/09/16 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
护士自荐信范文
2015/03/25 职场文书
清明节随笔
2015/08/15 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
字节飞书面试promise.all实现示例
2022/06/16 Javascript