在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