设置HTML中input标签的只读模式

在html中有两个设置只读的属性：

1.readOnly 可获取值，不可输入值，可回填值；

2.disabled 不可获取，不可输入值，可回填值；

1.基本操作

设置只读：

<!--设置disabled属性为只读-->
<input type="text" class="form-control" id="BWHM" name="keHuLianXiHao" disabled="true" maxlength="11"/>
<!--设置readonly属性为只读-->
<input type="text" class="form-control" id="KHMC" readonly="true"/>

通过JS控制只读模式：

//设置true代表只读
//取消disabled的只读模式
document.getElementById('BWHM').disabled = false;
//取消readOnly的只读模式
document.getElementById("KHMC").readOnly=false;

2.特点

1.两者在设置后都是不可以进行文本输入操作，并且会有灰色的遮罩层；但是当给下拉框类型设置 readOnly 属性时，还是我们可以选择的，设置和不设置的区别只是多了一层遮罩，并没有理想中的不可操作效果，所以在给下拉框设置只读时就要设置disabled 属性；

2.两者设置只读后鼠标移动上去显示的图标不一样；

3.设置 readOnly 后是可以获取到标签的值的，但 disabled 是不可以获取值；

3.实例

1.这里修改模态框和新增模态框是共用同一个模态框，但是有一个字段新增时需要输入，修改时就是只读；

思路说一下即可：在HTML可以写，可以不写，在模态框弹出之前设置disabled 属性，如需要显示为只读则设置为document.getElementById('BWHM').disabled = true；即可。反之设置为false;

2.我写一个下拉框，我下拉框是只读的（disabled ），我在一个树形图中选择一个值回填到下拉框中，然后提交下拉框的数据；（即下拉框只读无法获取值，但是又需要获取值）

思路：form表单为例，可以在它提交数据前设置disabled为false（可以在点击事件中或者在form表单提交验证数据时设置）,使数据变为可读，当提交完成后再设置为只读；

form表单,在判断数据时设置：https://blog.csdn.net/weixin_44544885/article/details/91357706