鍍金池/ 問答/HTML/ vue中input time標(biāo)簽獲取焦點(diǎn)問題

vue中input time標(biāo)簽獲取焦點(diǎn)問題

1.代碼如下,當(dāng)進(jìn)入頁(yè)面的時(shí)候,輸入班次名稱,然后選擇一天一次打卡,輸入的上班時(shí)間的時(shí)候,直接輸入到了班次名稱上, 沒有任何錯(cuò)誤

<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">上下班次數(shù)設(shè)置</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="上班時(shí)間"/>
                    </div>
                    <div class="col-sm-2 control-label">最早取卡時(shí)間</div>
                    <div class="col-sm-3">
                        <input type="time" class="form-control"
                               v-model="firstScheduleWorktime.preStartTime" placeholder="最早取卡時(shí)間"/>
                    </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="下班時(shí)間"/>
                    </div>
                    <div class="col-sm-2 control-label">最晚取卡時(shí)間</div>
                    <div class="col-sm-3">
                        <input type="time" class="form-control"
                               v-model="firstScheduleWorktime.lateEndTime" placeholder="最晚取卡時(shí)間"/>
                    </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="上班時(shí)間"/>
                    </div>
                    <div class="col-sm-2 control-label">最早取卡時(shí)間</div>
                    <div class="col-sm-3">
                        <input type="time" class="form-control"
                               v-model="secondScheduleWorktime.preStartTime" placeholder="最早取卡時(shí)間"/>
                    </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="下班時(shí)間"/>
                    </div>
                    <div class="col-sm-2 control-label">最晚取卡時(shí)間</div>
                    <div class="col-sm-3">
                        <input type="time" class="form-control"
                               v-model="secondScheduleWorktime.lateEndTime" placeholder="最晚取卡時(shí)間"/>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <div class="col-sm-2 control-label">午休開始時(shí)間</div>
                <div class="col-sm-3">
                    <input type="time" class="form-control" style="cursor: pointer;"
                           v-model="kqSchedule.noonrestStartTime" placeholder="午休開始時(shí)間"/>
                </div>
                <div class="col-sm-2 control-label">午休結(jié)束時(shí)間</div>
                <div class="col-sm-3">
                    <input type="time" class="form-control" style="cursor: pointer;"
                           v-model="kqSchedule.noonrestEndTime" placeholder="午休結(jié)束時(shí)間"/>
                </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>

請(qǐng)問有人遇到過這個(gè)情況嗎,要如何處理,用的是谷歌瀏覽器最新版本67.xxxx,沒有錯(cuò)誤,感覺像是焦點(diǎn)沒有切換過來

回答
編輯回答
墨小白

按照你給的問題本身,看不出任何問題。
還是直接截圖代碼跟報(bào)錯(cuò)信息吧。方便的話把頁(yè)面渲染的html結(jié)構(gòu)也拉出來看看

clipboard.png
測(cè)試結(jié)果 沒有影響。
測(cè)試環(huán)境 win10 chrome 62.0.3202.62
初步判定可能是 bootstrap還是別的什么玩意影響了焦點(diǎn)。
建議題主把整個(gè) .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">上下班次數(shù)設(shè)置</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="上班時(shí)間" />
          </div>
          <div class="col-sm-2 control-label">最早取卡時(shí)間</div>
          <div class="col-sm-3">
            <input type="time" class="form-control" v-model="firstScheduleWorktime.preStartTime" placeholder="最早取卡時(shí)間" />
          </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="下班時(shí)間" />
          </div>
          <div class="col-sm-2 control-label">最晚取卡時(shí)間</div>
          <div class="col-sm-3">
            <input type="time" class="form-control" v-model="firstScheduleWorktime.lateEndTime" placeholder="最晚取卡時(shí)間" />
          </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="上班時(shí)間" />
          </div>
          <div class="col-sm-2 control-label">最早取卡時(shí)間</div>
          <div class="col-sm-3">
            <input type="time" class="form-control" v-model="secondScheduleWorktime.preStartTime" placeholder="最早取卡時(shí)間" />
          </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="下班時(shí)間" />
          </div>
          <div class="col-sm-2 control-label">最晚取卡時(shí)間</div>
          <div class="col-sm-3">
            <input type="time" class="form-control" v-model="secondScheduleWorktime.lateEndTime" placeholder="最晚取卡時(shí)間" />
          </div>
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-2 control-label">午休開始時(shí)間</div>
        <div class="col-sm-3">
          <input type="time" class="form-control" style="cursor: pointer;" v-model="kqSchedule.noonrestStartTime" placeholder="午休開始時(shí)間" />
        </div>
        <div class="col-sm-2 control-label">午休結(jié)束時(shí)間</div>
        <div class="col-sm-3">
          <input type="time" class="form-control" style="cursor: pointer;" v-model="kqSchedule.noonrestEndTime" placeholder="午休結(jié)束時(shí)間" />
        </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里面已經(jīng)有的key才行,普通值
  ////dosth
  //},
  //watchB:{//必須是data||props里面已經(jīng)有的key才行,對(duì)象obj
  //deep:true,
  //handler(val,oldval){
  ////dosth
  //}
  //},
  //},
  //created () {
  //},
  //mounted () {
  //},
  //beforeDestroy () {
  //},
  //beforeRouteEnter(to, from, next) {
  //next(vm => {
  //// 通過 `vm` 訪問組件實(shí)例
  //});
  //},
  //beforeRouteLeave(to, from, next){
  //// dosth 可以用this訪問當(dāng)前組件上下文
  //next();
  //},
};
</script>
2017年12月9日 09:04