所有分类
  • 所有分类
  • 后端开发
HTML属性大揭秘:readonly vs disabled,一定要搞清楚

HTML属性大揭秘:readonly vs disabled,一定要搞清楚

password)和textarea元素,那还是可以的,如果存在其他发元素,比如select,用户可以在重新改写值后按回车键进行提交(回车是默认的submit触发按键)

朋友们,今天我们聊聊个挺有趣的东西。你知道吗,HTML里面的readonly和disabled这俩属性有时候挺像的,但又不是完全一样。你有没有把它们弄乱?那就让我来说说。

让我先跟大家说下readonly和disabled的差别。看见没,readonly只能管控input(text/password)和textarea,但disabled可不止这些,任何form元素它都能控制。注意,如果form里用上了disabled,那会怎样?这样提交FORM时,这个元素会不会带上值走?快点回答我!

你说得对!选上’disabled’, 网页就不会把你选定的那部分值传上去;但要是选中’readonly’?那就不一样了,它是100%会传值的!有些特殊情况下,像咱们给用户预先设定好一个不能改的唯一识别码,却还是要把这个码传上去的话,就得用’readonly’!

再来聊个事你有没碰上过用户填完表格得等管理员审核通过才能用啊?这会儿他们只能看内容,再也动不了了。那这个时候到底是用disabled还是readonly好?赶紧分享下你的想法!

HTML属性大揭秘:readonly vs disabled,一定要搞清楚

是的,答案是disabled!但是别忘了,用了disabled的话,提交按钮也要跟着 disabled,不然亲们一点,数据就没了,这可是大坑!

小伙伴们,再来问个小问题大家是不是常常在用户点击提交按钮时,咱们就会用js把这个提交按钮设置为disabled?这么做就是为了避免网络信号差或者别的什么原因让用户重复点提交按钮,导致数据重复地入库。那我想问问你们,disabled跟readonly这两个属性到底有啥不一样?快来分享你们的看法!

知道答案吗?disabled和readonly虽然有些相似,但真的不完全相同!你看,如果两个属性都设置成了true,那我们就不能修改那个表单了。不过要注意了,disabled除了不让你编辑之外,连焦点也抓不到!也就是它根本感受不到你的操作~而且别忘了,就算提交了表格,带有disabled属性的项目也是不会跟着上传滴。至于readonly,虽然不能修改内容,但是你还能照常调整焦点。最关键的,提交表格的时候,这些项目还是会跟随着一起上传的!所以,别小瞧这几个英文字母,它们实际上是大有乾坤的

好了,今天咱们聊聊html中的输入框readonly和disable两个属性之间有啥不同。希望小伙伴们听完后能有所收获!在用表单元素时别忘了根据实际情况来选属性,免得出岔子哈。觉得这文章有用就点赞,分享给更多朋友!

好,今天的分享先告一段落咯!还有啥子跟HTML有关的问题想问的话,咱们就留言聊起来!当然,大家在看了这篇文章以后,别忘了给个赞,留个言,分享出去下回再见

原文链接:https://www.icz.com/technicalinformation/web/2024/03/11414.html,转载请注明出处~~~
0

评论0

请先
注意:请收藏好网址www.icz.com,防止失联!站内免费资源持续上传中…!赞助我们
显示验证码
没有账号?注册  忘记密码?