html 表单元素的readonly 和disabled

2016-12-22  本文已影响0人  jaminwong
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"
    }
 }
})
上一篇下一篇

猜你喜欢

热点阅读