vue中input time标签获取焦点问题

Question

1.代码如下，当进入页面的时候，输入班次名称，然后选择一天一次打卡，输入的上班时间的时候，直接输入到了班次名称上， 没有任何错误

<form id="formID" class="form-horizontal" style="width:900px; margin: 0 auto;">
            <div class="form-group">
                <div class="col-sm-2 control-label">班次名称</div>
                <div class="col-sm-10">
                    <input type="text" id="sname" name="sname" class="form-control" v-model="kqSchedule.name" placeholder="班次名称"
                           required/>
                    <label for="sname" class="error"></label>
                </div>
            </div>

            
            <div class="form-group">
                <div class="col-sm-2 control-label">上下班次数设置</div>
                <label class="radio-inline">
                    <input type="radio" name="type" value="1" v-model="kqSchedule.type"/> 一天一次上下班
                </label>
                <label class="radio-inline">
                    <input type="radio" name="type" value="2" v-model="kqSchedule.type"/> 一天二次上下班
                </label>
            </div>
            <div v-if="kqSchedule.type > 0" style="border: 1px solid #007fff; border-radius: 5px; margin-bottom: 15px;">
                <div class="form-group">
                    <div class="col-sm-2 control-label">第一次上下班</div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">上班</div>
                    <div class="col-sm-3">
                        <input type="time" class="form-control"
                               v-model="firstScheduleWorktime.startTime" placeholder="上班时间"/>
                    </div>
                    <div class="col-sm-2 control-label">最早取卡时间</div>
                    <div class="col-sm-3">
                        <input type="time" class="form-control"
                               v-model="firstScheduleWorktime.preStartTime" placeholder="最早取卡时间"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">下班</div>
                    <div class="col-sm-3">
                        <input type="time" class="form-control"
                               v-model="firstScheduleWorktime.endTime" placeholder="下班时间"/>
                    </div>
                    <div class="col-sm-2 control-label">最晚取卡时间</div>
                    <div class="col-sm-3">
                        <input type="time" class="form-control"
                               v-model="firstScheduleWorktime.lateEndTime" placeholder="最晚取卡时间"/>
                    </div>
                </div>
            </div>
            <div v-if="kqSchedule.type >= 2"
                 style="border: 1px solid #007fff; border-radius: 5px;margin-top: 2px; margin-bottom: 15px;">
                <div class="form-group">
                    <div class="col-sm-2 control-label">第二次上下班</div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">上班</div>
                    <div class="col-sm-3">
                        <input type="time" class="form-control"
                               v-model="secondScheduleWorktime.startTime" placeholder="上班时间"/>
                    </div>
                    <div class="col-sm-2 control-label">最早取卡时间</div>
                    <div class="col-sm-3">
                        <input type="time" class="form-control"
                               v-model="secondScheduleWorktime.preStartTime" placeholder="最早取卡时间"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">下班</div>
                    <div class="col-sm-3">
                        <input type="time" class="form-control"
                               v-model="secondScheduleWorktime.endTime" placeholder="下班时间"/>
                    </div>
                    <div class="col-sm-2 control-label">最晚取卡时间</div>
                    <div class="col-sm-3">
                        <input type="time" class="form-control"
                               v-model="secondScheduleWorktime.lateEndTime" placeholder="最晚取卡时间"/>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <div class="col-sm-2 control-label">午休开始时间</div>
                <div class="col-sm-3">
                    <input type="time" class="form-control" style="cursor: pointer;"
                           v-model="kqSchedule.noonrestStartTime" placeholder="午休开始时间"/>
                </div>
                <div class="col-sm-2 control-label">午休结束时间</div>
                <div class="col-sm-3">
                    <input type="time" class="form-control" style="cursor: pointer;"
                           v-model="kqSchedule.noonrestEndTime" placeholder="午休结束时间"/>
                </div>
            </div>
          
            <div class="form-group">
                <div class="col-sm-2 control-label">启用</div>
                <div class="col-sm-10">
                    <label class="radio-inline">
                        <input type="radio" name="isused" value="Y" v-model="kqSchedule.isused"/> 正常
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="isused" value="N" v-model="kqSchedule.isused"/> 禁用
                    </label>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label"></div>
                <input type="button" class="btn btn-primary" @click="saveOrUpdate" value="保存"/>
                &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
            </div>
        </form>

请问有人遇到过这个情况吗，要如何处理，用的是谷歌浏览器最新版本67.xxxx，没有错误，感觉像是焦点没有切换过来

Answer 1

按照你给的问题本身，看不出任何问题。
还是直接截图代码跟报错信息吧。方便的话把页面渲染的html结构也拉出来看看

测试结果 没有影响。
测试环境 win10 chrome 62.0.3202.62
初步判定可能是 bootstrap还是别的什么玩意影响了焦点。
建议题主把整个 .vue 丢上来一起看看。

<style lang="less" scoped>
.test {
  width: 90%;
  min-height: 600px;
  background-color: #fff;
  position: absolute;
  top: 200px;
  left: 5%;
  padding: 50px;
  input {
    width:200px;
    height:30px;
    border:1px solid #c6c6c6;
  }
  .form-group {
    width: 90%;
    height:50px;
    .col-sm-3,
    .col-sm-10,
    .col-sm-2 {
      display: inline-block;
    }
    .control-label {
      display: inline-block;
    }
  }
}
</style>
<template>
  <div class="test">
    <form id="formID" class="form-horizontal" style="width:900px; margin: 0 auto;">
      <div class="form-group">
        <div class="col-sm-2 control-label">班次名称</div>
        <div class="col-sm-10">
          <input type="text" id="sname" name="sname" class="form-control" v-model="kqSchedule.name" placeholder="班次名称" required/>
          <label for="sname" class="error"></label>
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-2 control-label">上下班次数设置</div>
        <label class="radio-inline">
          <input type="radio" name="type" value="1" v-model="kqSchedule.type" /> 一天一次上下班
        </label>
        <label class="radio-inline">
          <input type="radio" name="type" value="2" v-model="kqSchedule.type" /> 一天二次上下班
        </label>
      </div>
      <div v-if="kqSchedule.type > 0" style="border: 1px solid #007fff; border-radius: 5px; margin-bottom: 15px;">
        <div class="form-group">
          <div class="col-sm-2 control-label">第一次上下班</div>
        </div>
        <div class="form-group">
          <div class="col-sm-2 control-label">上班</div>
          <div class="col-sm-3">
            <input type="time" class="form-control" v-model="firstScheduleWorktime.startTime" placeholder="上班时间" />
          </div>
          <div class="col-sm-2 control-label">最早取卡时间</div>
          <div class="col-sm-3">
            <input type="time" class="form-control" v-model="firstScheduleWorktime.preStartTime" placeholder="最早取卡时间" />
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-2 control-label">下班</div>
          <div class="col-sm-3">
            <input type="time" class="form-control" v-model="firstScheduleWorktime.endTime" placeholder="下班时间" />
          </div>
          <div class="col-sm-2 control-label">最晚取卡时间</div>
          <div class="col-sm-3">
            <input type="time" class="form-control" v-model="firstScheduleWorktime.lateEndTime" placeholder="最晚取卡时间" />
          </div>
        </div>
      </div>
      <div v-if="kqSchedule.type >= 2" style="border: 1px solid #007fff; border-radius: 5px;margin-top: 2px; margin-bottom: 15px;">
        <div class="form-group">
          <div class="col-sm-2 control-label">第二次上下班</div>
        </div>
        <div class="form-group">
          <div class="col-sm-2 control-label">上班</div>
          <div class="col-sm-3">
            <input type="time" class="form-control" v-model="secondScheduleWorktime.startTime" placeholder="上班时间" />
          </div>
          <div class="col-sm-2 control-label">最早取卡时间</div>
          <div class="col-sm-3">
            <input type="time" class="form-control" v-model="secondScheduleWorktime.preStartTime" placeholder="最早取卡时间" />
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-2 control-label">下班</div>
          <div class="col-sm-3">
            <input type="time" class="form-control" v-model="secondScheduleWorktime.endTime" placeholder="下班时间" />
          </div>
          <div class="col-sm-2 control-label">最晚取卡时间</div>
          <div class="col-sm-3">
            <input type="time" class="form-control" v-model="secondScheduleWorktime.lateEndTime" placeholder="最晚取卡时间" />
          </div>
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-2 control-label">午休开始时间</div>
        <div class="col-sm-3">
          <input type="time" class="form-control" style="cursor: pointer;" v-model="kqSchedule.noonrestStartTime" placeholder="午休开始时间" />
        </div>
        <div class="col-sm-2 control-label">午休结束时间</div>
        <div class="col-sm-3">
          <input type="time" class="form-control" style="cursor: pointer;" v-model="kqSchedule.noonrestEndTime" placeholder="午休结束时间" />
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-2 control-label">启用</div>
        <div class="col-sm-10">
          <label class="radio-inline">
            <input type="radio" name="isused" value="Y" v-model="kqSchedule.isused" /> 正常
          </label>
          <label class="radio-inline">
            <input type="radio" name="isused" value="N" v-model="kqSchedule.isused" /> 禁用
          </label>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-2 control-label"></div>
        <input type="button" class="btn btn-primary" @click="saveOrUpdate" value="保存" /> &nbsp;&nbsp;
        <input type="button" class="btn btn-warning" @click="reload" value="返回" />
      </div>
    </form>
  </div>
</template>
<script>
export default {
  //props:{
  //props:{
  //type:String,
  //default:String,
  //},
  //},
  data() {
    return {
      kqSchedule: {
        name: "",
        type: "",
        isused: "",
        noonrestStartTime: "",
        noonrestEndTime: ""
      },
      firstScheduleWorktime: {
        startTime: "",
        preStartTime: "",
        endTime: "",
        lateEndTime: ""
      },
      secondScheduleWorktime: {
        startTime: "",
        preStartTime: "",
        endTime: "",
        lateEndTime: ""
      }
    };
  },
  methods: {
    saveOrUpdate() {
      //dosth
    },
    reload() {
      //dosth
    }
  }
  //computed:{
  //computedA(){
  //return xxx
  //},
  //},
  //watch:{
  //watchA(val,oldval){//必须是data||props里面已经有的key才行,普通值
  ////dosth
  //},
  //watchB:{//必须是data||props里面已经有的key才行,对象obj
  //deep:true,
  //handler(val,oldval){
  ////dosth
  //}
  //},
  //},
  //created () {
  //},
  //mounted () {
  //},
  //beforeDestroy () {
  //},
  //beforeRouteEnter(to, from, next) {
  //next(vm => {
  //// 通过 `vm` 访问组件实例
  //});
  //},
  //beforeRouteLeave(to, from, next){
  //// dosth 可以用this访问当前组件上下文
  //next();
  //},
};
</script>