html 表单元素的readonly 和disabled

readonly 属性规定输入字段为只读

一般用法

    <input readeonly />
    <input readonly="readonly"/>

其实只要 当前表单元素上面有readony 属性就行无论他的值是什么

//以下两种均有效
<input readonly="false"/>
<input readonly=""/>

设置为存在readonly属性的元素,只是不能编辑。仍然可以使用 tab 键切换到该字段,还可以选中或拷贝其文本。
只要有 html 元素中有了 readonly 属性,$0.readonly=true
只有删掉readonly属性($0.readonly=undefined)或者$0.readonly=fasle(此时element 中也看不到该html 有readonly 属性)

disabled 属性规定应该禁用 input 元素
用法
<input disabled />
<input disabed="disabled"/>

不能修改,不能使用 tab 键切换到该字段,不可以选中或拷贝其文本。其上绑定的事件也均不能被触发。

react jsx 语法中 可以设置

<input readOnly={true} />
<input readOnly={1} />
<input readOnly={readonly} />
<input readOnly/>

vue 中

<div id="example">
  <input v-bind:readonly="isReadOnly">
</div>
var vm = new Vue({
  el: '#example',
  data: {
  editable: false
  },
  computed: {
    // a computed getter
    isReadOnly: function () {
     return this.editable? null:"readonly"
    }
 }
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本人做php的,最近发现JS真的是博大精深啊,比PHP难.在HTML中,表单是由form元素来表示的,但是在jav...
    linfree阅读 2,235评论 3 17
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,997评论 19 139
  • 表单基础知识 在HTML中,表单是由 元素来表示的,而在JS中,表单对应的则是HTMLFormElement类型。...
    oWSQo阅读 921评论 0 1
  • Ubuntu的发音 Ubuntu,源于非洲祖鲁人和科萨人的语言,发作 oo-boon-too 的音。了解发音是有意...
    萤火虫de梦阅读 99,598评论 9 467
  • 责不可共:管理者安排事情一定要具体到每个人,出现什么问题也要责任到人,这样员工做这件事情心里责任心会比较强。 责不...
    Ding欣欣阅读 237评论 0 1