vue项目中input框不允许输入 必须通过选项选择的几种方式

vue项目中input框不允许输入 必须通过选项选择的几种方式

1： readonly属性

定义和用法

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

只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。

readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。

readonly 属性可与 或 配合使用。

<input type="text"  readonly>

2:disabled禁用

2：disabled 被禁用的 input 元素可复制，不能接收焦点,设置后文字的颜色会变成灰色。无法与 一起使用。

<el-input v-model="formData.departmentName" style="width:50%" placeholder="请选择部门" disabled @click.native="hFocus" />
使用b-bind单向绑定
<el-input :value="formData.departmentName" style="width:50%" placeholder="请选择部门" disabled @click.native="hFocus" />

readonly和disabled区别

区别：
（1） 表面上可看到的区别就是当这两个词都设置为true时，都为禁用状态，当鼠标移上时使用disable的相关控件时鼠标出现禁用样式，并且不可做任何操作，而Readonly还可以获取文本框里的焦点。
（2） Disable比readonly的使用范围比广，适用文本框、文本域、下拉框、button按钮、单选框…….而readonly只适用于input（text、passwork、textarea）。
（3） Disable设置为true之后是不可以向后台提交数据的，此时可以选择改用readonly进行禁用，或者在提交数据时取消禁用。

3：通过控制input的max length为0实现

<input type="text" maxlength="0">

4:失去焦点

4：οnfοcus="this.blur();“onfocuse是聚焦的意思，当你把光标放在文本框上输入的时候，就是聚焦，但这里添加了"this.blur()”，blur的作用就是去除聚焦，也就是你不能把光标放在这个文本框上，换句话说就是你不能输入文本了

<input type="text" value="hello JavaScript" onfocus="this.blur();">