在layui近期的开发中,遇到一则需求:设备的故障原因明确,点选即可,但是又需要维修人员将该原因自动输入到文本框进行记录。
同样的事情,做两遍,对操作人员来说是不友好的,何况又是在手机端使用的情况,如果解决不重复劳动,不给维修人员增加麻烦,减少打字环节呢?
HTML代码
<div class="weui-cells weui-cells_form"> <div class="weui-cell"> <div class="weui-cell__hd"><label class="weui-label">点位重启</label></div> <div class="weui-cell__bd"> <input type="radio" name="poi_restart" lay-filter="poi_restart" value="1" title="是"> <input type="radio" name="poi_restart" lay-filter="poi_restart" value="0" title="否" checked> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label class="weui-label">无主电源</label></div> <div class="weui-cell__bd"> <input type="radio" name="poi_noelectricity" lay-filter="poi_noelectricity" value="1" title="是"> <input type="radio" name="poi_noelectricity" lay-filter="poi_noelectricity" value="0" title="否" checked> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label class="weui-label">无光信号</label></div> <div class="weui-cell__bd"> <input type="radio" name="poi_nolight" lay-filter="poi_nolight" value="1" title="是"> <input type="radio" name="poi_nolight" lay-filter="poi_nolight" value="0" title="否" checked> </div> </div> <div class="weui-media-box weui-media-box_text"> <p class="weui-media-box__desc" style="margin-bottom: 10px;">维修描述</p> <div class="weui-media-box__title"> <input class="weui-input" type="text" name="poi_md" id="poi_md"/> </div> </div> </div>
layUI交互代码
/*单选自动输入事件*/ var ele = document.getElementById("poi_md"); /*01.重启*/ form.on("radio(poi_restart)", function (data) { //console.log(data.value); var thisValue=data.value; if (thisValue == '1') { var a = ele.value + "重启,"; $("#poi_md").val(a); } else{ var b = ele.value.replace('重启,',''); $("#poi_md").val(b); } }); /*02.主电源*/ form.on("radio(poi_noelectricity)", function (data) { var thisValue=data.value; if (thisValue == '1') { var a = ele.value + "无主电源,"; $("#poi_md").val(a); } else{ var b = ele.value.replace('无主电源,',''); $("#poi_md").val(b); } }); /*03.无光信号*/ form.on("radio(poi_nolight)", function (data) { var thisValue=data.value; if (thisValue == '1') { var a = ele.value + "无光信号,"; $("#poi_md").val(a); } else{ var b = ele.value.replace('无光信号,',''); $("#poi_md").val(b); } });
lockdatav Done !