readonly与disabled的区别

时间: 2019-01-24阅读: 972标签: 属性

一. 范围不同

readonly 只对 <input> 和 <textarea> 标签有效

disabled 对所有表单元素都有效, 包括:<input>, <textarea>, <button>, <label>, <option>, <select>等


二. 程度不同

readonly 只是将元素设置为只读,不可输入,对其它操作没有影响

disabled 阻止元素的一切操作。包括 获取焦点,点击事件等


三. 表单提交

readonly 只是将元素设置为只读,不影响表单提交

disabled 设置了该属性的表单元素,值将不会随着表单一起提交


四. JavaScript操作

设置了readonly和disabled的表单元素,用户无法再界面上改变它的值。但通过JavaScript是可以改变其值的,同样背景色,字体颜色等也可以通过JavaScript来改变。

例如:下面的代码运行在chrome浏览器中时,点击“点我”后两个input框的字体颜色、背景色,值都会发生变化。

$('input').attr("readonly","readonly") //将input元素设置为readonly  
$('input').removeAttr("readonly"); //去除input元素的readonly属性  
 或
$('input').attr("readonly",true)
$('input').attr("readonly",false)
$('input').val ('1')   // 设置input的值
注: 使用表单post或get传递时会被传递出去
$('input').attr("disabled","disabled") //将input元素设置为readonly  
$('input').removeAttr("disabled"); //去除input元素的readonly属性  
 或
$('input').attr("disabled",true)
$('input').attr("disabled",false)
$('input').val ('0')   // 设置input的值

//注: 使用表单post或get传递时不会被传递出去


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1877

关闭

获取relatedTarget属性

在做mouseenter与mouseleave的兼容时,我们需要用到事件对象的relatedTarget属性

csstext属性的使用_js中的style.cssText用法及特点

cssText 的本质就是设置 HTML 元素的 style 属性值。在某些浏览器中(比如 Chrome),你给他赋什么值,它就返回什么值。在 IE 中则比较痛苦,它会格式化输出、会把属性大写、会改变属性顺序

Vue中的computed

使用vue框架已经一年多的时间了,虽然踩了不少的坑,但是 有些错误是经常性的。正好利用现在的空余时间,对自己所学的,所用的东西进行整理,总结。避免下次在采坑,也希望自己的总结,能够带给别人一些启发。

如何判断一个对象的某个属性是可写的?

这是一个咋一听好像很简单,但是实际上却没那么简单,而且是很有趣的问题。我们先来看一下什么情况下一个对象的属性是可写的。属性可写,是指满足如下条件:

Vue与ref属性与refs的使用

ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例

TypeScript数字分隔符和更严格的类属性检查

TypeScript 2.4 为标识符实现了拼写纠正机制。即使咱们稍微拼错了一个变量、属性或函数名,TypeScript 在很多情况下都可以提示正确的拼写。TypeScript 2.7 支持 ECMAScript 的数字分隔符提案。

移动端-webkit-overflow-scrolling:touch属性导致页面卡住

故事的起因是,在一个多列表的页面上,页面在iOS11,跟iOS10中会发生页面卡住,不能进行滚动。然后就怀疑是自己的样式写的出了问题,就一直排查定位元素的样式,怎么都找不到问题所在

React 也能“用上” computed属性

初次见到计算属性一词,是在 Vue 官方文档 《计算属性和侦听器》 一节中,文章中是这样描述计算属性的:模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

css3的calc属性不生效问题

css3的 calc:计算属性。由于自己做的项目中这个属性不常用到,偶尔用一次还没效果。后来研究了下是因为运算符两边没加空格。

Vue.js 计算属性

在html模版中绑定数据时,如果需要的数据不是一个简单的数据,而是需要将一个或者多个数据计算之后得到的数据,这时候就需要用到计算属性;使用方法:配置computed属性,它的值为对象

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!