css小技巧—改善你的输入体验

css已经被视作web标准的最大标志之一,但是css不仅仅是用来做布局和文字样式那么简单,下面就给大家介绍一个css的小技巧,用来改善网站的用户输入体验。
我们在登录邮箱的时候需要输入自己的用户名和密码,密码输入框是禁止ime切换的,也就是说不认输入法,因此你的密码不可能是中文,只可能是键盘上有的字符,但是用户名就不一样,大多数网站的用户名输入框是不禁止输入法的,因此有的时候我们需要把输入法从中文切换到英文才能正确输入我们的邮箱用户名(因为几乎所有的用户名都是英文字符串的),时间久了就让人觉得很麻烦,那么有没有办法使用户名的输入框也像密码框那样不认输入法呢(不管你进来的时候是什么输入法,输入的都是英文)?答案是肯定的,css就能很好的帮我们解决这个问题,我们只要设置相应输入框的css属性ime-mode为disabled就可以了。

ime-mode
版本:IE5+专有属性 继承性:无
语法:
ime-mode : auto | active | inactive | disabled
取值:
auto:默认值。不影响IME的状态。与不指定 ime-mode 属性时相同
active:指定所有使用IME输入的字符。即激活本地语言输入法。用户仍可以撤销激活IME
inactive:指定所有不使用IME输入的字符。即激活非本地语言。用户仍可以撤销激活IME
disabled:完全禁用IME。对于有焦点的控件(如输入框),用户不可以激活IME
说明:
设置或检索是否允许用户激活输入中文,韩文,日文等的输入法(IME)状态。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 imeMode 。

不过目前这个属性只在IE中被支持,虽然如此,也已经能解决很大的问题了。
另外在有些网站发表评论或文章是需要验证码的,因此这个ime-mode也可以用来解决验证码的输入法切换问题;其中有些网站的验证码大小写都有,有些则是只有大写或者小写,这种情况下大家可以通过设置text-transform属性来控制输入的全是是大写还是小写:

text-transform
版本:CSS1  兼容性:IE4+ NS4+ 继承性:有
语法:
text-transform : none | capitalize | uppercase | lowercase
取值:
none:默认值。无转换发生
capitalize:将每个单词的第一个字母转换成大写,其余无转换发生
uppercase:转换成大写
lowercase:转换成小写
说明:
检索或设置对象中的文本的大小写。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 textTransform 。

怎么样?是不是很方便,网站的输入框添加了这些css属性以后,用户的输入体验肯定会更棒,另外我想说明的是text-transform只是改变你输入的英文的大小写,并不改变输入框的值,意思是如果你输入的是小z,你设置了输入框全都转化为大写,那么在你的输入框里出现的是大写的Z,但是输入框的value却还是小z。

Leave A Comment

Bad Behavior has blocked 951 access attempts in the last 7 days.