美文网首页
html 表单元素的readonly 和disabled

html 表单元素的readonly 和disabled

作者: jaminwong | 来源:发表于2016-12-22 22:34 被阅读0次
    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"
        }
     }
    })
    

    相关文章

      网友评论

          本文标题:html 表单元素的readonly 和disabled

          本文链接:https://www.haomeiwen.com/subject/cmiouttx.html