readonly和disabled属性以及input的新属性

html的标签中,有一个disabled属性,这是一个我之前都不怎么关注过的属性,因为觉得不太会用到这个属性。

写在前面

就因为觉得不会用到这个属性,也就没有太多的关注过这个属性,所以也为此付出了代价,因为我把select元素给disabled之后,表单提交时,被disabled的元素将不会再被提交,这就是一个很大的问题了。

关于disabled和readonly

想要把一个元素禁用或者把一个输入框设置为只读,disabledreadonly都是可以实现的,但是他们之间是有一些差别的,比如有效元素。

disabled可以在input,button,textarea等都起作用,并且disabled之后,相应的元素不论是绑定的事件,还是样式都会有变化,样子变成淡灰色,绑定的事件,默认的事件动作,都讲无法执行。

比如,对一个select框添加disabled之后,select框变得淡灰色,并且当点击select时,无法继续弹出下拉框了,表现的形式就是,该元素只能是供你查看的,无法进行任何操作。

所以,disabled的元素,如果是表单元素,那么这样的表单元素,在表单被提交时是无法被提交的。

当然你可以通过JS把对应的disabled属性去掉。

readonly的值,虽然可以被提交,但是它也有自己无能为力的时候,readonly属性,只在可输入的元素框才有效,比如radio,checkbox,select等这样的地方,是无效的。

并且,readonly属性,也不会改变输入框的样式,所以在我们看来,是没有差别的。

差强人意的select标签

这也是本篇文章的一个重点,自我感觉select是一个一直被嫌弃的元素,因为它不支持输入,无法直接阻止它的默认动作,无法使用JS触发它本身的基本事件,几乎所有的select的功能,都只能使用浏览器自带的select功能。

所以,才有插件去完全的模拟select元素,使得即完成select原有功能的情况下,可以根据不同的需求,实现更多的功能。

之前我也写过一个这样的插件:selectBox模拟select元素-插件

之所以发现disabled的元素无法被表单提交,也是因为当时想要禁用一个select元素,而元素select框的无法控制性,也只能使用disabled属性,才能实现该功能,所以,就出了问题。

input的date属性

前面的这些也就简单这么一说,还有一个我觉得让我意外的地方是,inputhtml5属性中,出现了几个属性,这个属性我在之前就是知道的,只是在最初的时候,我是在电脑端的浏览器去测试的这个属性,当时就觉得这个做的真是太烂了。

就算有这个简单的方法可以调用选择时间的插件,也不会有人用吧,实在是没法看的~~~

所以就此不再关注这些属性~~

也就在不久前的几天,从一个APP中,看到了一个效果~~~

还是直接看下效果吧:http://www.zhangyunling.com/study/2015/20150406/index.html

使用手机端看吧,电脑端的样子,简直是不忍直视。

可以直接扫描二维码访问该示例页面:

还有其他一些type = "datetime/datetime-local/month/week/time"等属性,各有不同的样式,有兴趣的可以自己测试。

顺便在说一下其他的,inputtype="file"在手机端的显示,也很不多哦,试试吧。

在上述的示例页面中,添加了不同typeinput输入框,有兴趣的试试吧,当然有些属性还是不能被支持的,比如我在IOS下测试时,datetime,week属性是不被支持的。

总结

不管是在工作还是学习中,偶尔总能让人有意外的惊喜,就像是发现了新大陆一样,这里也算是吧,只是说了一些之前一直知道,但是却没有太重视的地方,给了我一些意外的惊喜。

本文地址:http://www.zhangyunling.com/?p=391

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>