input元素的readonly属性问题

摘要

随着HTML5时代的到来,越来越多的人开始投身于移动端的开发当中。这也使得web前端开发的供求关系发生着微妙变化。作为移动端开发的人,总是要和手机生产厂商做斗争。原因无它,每家手机厂商都想在这个“舞台”上表现的更加耀眼与突出。所以,这部分手机厂商就开始在手机系统上面搞自己的“小动作”。

随着HTML5时代的到来,越来越多的人开始投身于移动端的开发当中。这也使得web前端开发的供求关系发生着微妙变化。作为移动端开发的人,总是要和手机生产厂商做斗争。原因无它,每家手机厂商都想在这个“舞台”上表现的更加耀眼与突出。所以,这部分手机厂商就开始在手机系统上面搞自己的“小动作”。

如果现在还有人说,移动端开发那是So easy的。笔者会立马反驳:你肯定没有遇到过一些奇葩的手机表现,要不然就不会这么妄断了。

作为web前端开发行业的一员,笔者迫切希望各大浏览器厂商对HTML标签的样式表现能够保持一致。如果笔者的希望成为现实,对前端开发的同学来说绝对是一大福音。就目前情况来看,笔者的希望估计只能是一种奢望。

表单元素作为网页开发中常用的标签元素之一。因为其自身的特殊性,每个表单元素身上所具有的属性也都不尽相同。

某些标签表现样式的不一致,我们可以通过别的标签进行模拟。但是,同一个标签功能表现不一样,这就让人非常抓狂了。

不知道有没有同学做过表单只读属性在不同手机上的表现是否一致的测试。前段时间,笔者做一个东西要用到input元素的readonly属性。写好的东西,在安卓手机上运行,点击input之后的表现和预期的一样。因为input是只读属性,所以安卓手机软件盘不会做出任何反应。用苹果手机一测,问题接踵而至。对于input的只读属性,input在被点击之后,苹果手机会弹出部分软件盘(不同于正常可以输入的软件盘)。看到这种软件盘,笔者真的无法理解苹果手机这样做的用意何在?不知道是因为手机系统开发人员的疏忽,还是仅仅为了和前端开发人员开个玩笑。

针对这个问题,为了获得不同手机的表现一致。在不替换input元素的readonly属性的前提下,笔者能想到的方法就是在当前元素的上面覆盖一个透明的标签来阻止掉其获得焦点的行为。

虽说这只是一个小小的方面,但也从侧面让笔者对苹果手机产生抵触情绪。常言道:得民心者得天下。要想在手机市场这块大蛋糕中获得更多的利益,细节往往决定着成败。

shaw

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: