仅在输入被附加时集中输入

编程问答 2022-06-13

问题描述

我已经在表单中输入了日期选择器，并设置为隐藏。当单选按钮更改时，它将显示。我还默认设置了.input-datepicker焦点，以便在单击输入按钮时仍可以打开日期选择器。

这里的问题是，当我想在SET BY DAY广播处于活动状态且所有datepicker输入都设置为隐藏的情况下提交表单时，我的表单将引发如下错误：

名称='start_date []'的无效表单控件不可聚焦。

如何仅在显示日期选择器输入时将其聚焦？

function toggleDutySetting(type){
    if(type === 'day'){ 
        $('#show_date').hide();
        $('#working_hours_append').html('');
        $('.add-working-days').parent().hide();
    } else if(type === 'date'){
        $('#show_date').show();
        $('.add-working-days').parent().show();
    }
}

function addWorkingHours(){
    $('#working_hours_append').append(`
        <div class="input-group date input-datepicker" style="margin-top: 15px;">
            <input type="text" name="start_date[]" class="form-control pull-left border-radius-0" placeholder="DD-MM-YYYY" required="">
            <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
        </div>
    `);
}

$(document).ready(function(){
    $('body').on('focus',".input-datepicker ",function(){
        $(this).datepicker({ format: 'dd-mm-yyyy' });
    })
})
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <Meta charset="utf-8">
  <Meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw==" crossorigin="anonymous" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" integrity="sha512-G9dfCJFG3y/Xq8mbbqb5i3FQNVaGl0Fkkw+VPVT3L00gA4k7hyjSGNpaxykwgDw1cfJFlj5tO3XePa+ezjDQyQ==" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBbroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ==" crossorigin="anonymous"></script>
</head>
<body>

<div class="form-group">
    <label class="radio-inline">
        <input type="radio" onchange="toggleDutySetting('day')" name="type" value="day" checked>SET BY DAY
    </label>
    <label class="radio-inline">
        <input type="radio" onchange="toggleDutySetting('date')" name="type" value="rotation">SET BY ROTATION
    </label>
</div>

<div class="form-group">
    <div class="checkBox marginless-top">
        <label><input name="weekday[]" type="checkBox" value="MONDAY">Monday</label>
    </div>
    <div class="checkBox marginless-top">
        <label><input name="weekday[]" type="checkBox" value="TUESDAY">Tuesday</label>
    </div>
</div>

<div class="form-group" id="show_date" style="display: none;">
    <div class="input-group date input-datepicker">
        <input type="text" name="start_date[]" class="form-control pull-left border-radius-0" placeholder="DD-MM-YYYY" required="">
        <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
    </div>
</div>

<div class="form-group" id="working_hours_append"></div>

<div class="text-right margin-top" style="display: none;">
    <a href="javascript:;" onclick="addWorkingHours()" class="bold add-working-days"><i class="fa fa-plus"></i>&nbsp; WORKING DAYS</a>
</div>

</body>
</html>

解决方法

选择日期时，需要将prop设置为false，并将其轮换设置为true来确保fields得到验证。

我还使用data-attributes在所有新附加的focus上添加了inputs，以确保您仍然可以使用names[]将数据发送到backend。

使用find方法，对于每个新添加的输入，我们只能target和inputs使用data-attributes和counter。只要点击add Working day，输入本身就是focused，您就可以选择日期。

如果您选择按天设置，您的表格将按要求正常提交，没有错误。如果您选择按旋转设置，则将使用form-control和required属性来验证所有字段。

实时工作演示： 

//Toggle settings
function toggleDutySetting(type) {
  if (type === 'day') {
    $('#show_date').hide()
    $('#working_hours_append').html('');
    $('.add-working-days').parent().hide();
    $('#show_date').find('input[data-id="0"').prop('required',false).blur() //remove focus
  } else if (type === 'date') {
    $('#show_date').show().prop('required',true)
    $('.add-working-days').parent().show();
    $('#show_date').find('input[data-id="0"').prop('required',true).focus() //set to focus on rotation
  }
}

//Focus counter
var counter = 1

//Add inputs
function addWorkingHours() {
  $('#working_hours_append').append(`
        <div class="input-group date input-datepicker" style="margin-top: 15px;">
            <input type="text" data-id="` + counter + `" name="start_date[]" class="form-control pull-left border-radius-0" placeholder="DD-MM-YYYY" required="">
            <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
        </div>
    `);
  //Focus only after its appended
  $('#working_hours_append').find('input[data-id="' + counter + '"]').focus()
  counter++
}

$(document).ready(function() {
  $('body').on('focus',".input-datepicker ",function() {
    $(this).datepicker({
      format: 'dd-mm-yyyy',autoclose: true
    });
  })
})
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw==" crossorigin="anonymous"
  />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" integrity="sha512-G9dfCJFG3y/Xq8mbbqb5i3FQNVaGl0Fkkw+VPVT3L00gA4k7hyjSGNpAxykwgDw1cfJFlj5tO3XePa+ezjDQyQ==" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ==" crossorigin="anonymous"></script>
</head>

<body>

  <form>
    <div class="form-group">
      <label class="radio-inline">
            <input type="radio" onchange="toggleDutySetting('day')" name="type" value="day" checked>SET BY DAY
        </label>
      <label class="radio-inline">
            <input type="radio" onchange="toggleDutySetting('date')" name="type" value="rotation">SET BY ROTATION
        </label>
    </div>

    <div class="form-group">
      <div class="checkbox marginless-top">
        <label><input name="weekday[]" type="checkbox" value="MONDAY">Monday</label>
      </div>
      <div class="checkbox marginless-top">
        <label><input name="weekday[]" type="checkbox" value="TUESDAY">Tuesday</label>
      </div>
    </div>

    <div class="form-group" id="show_date" style="display: none;">
      <div class="input-group date input-datepicker">
        <input type="text" data-id="0" name="start_date[]" class="form-control pull-left border-radius-0" placeholder="DD-MM-YYYY">
        <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
      </div>
    </div>

    <div class="form-group" id="working_hours_append"></div>

    <div class="text-right margin-top" style="display: none;">
      <a href="javascript:;" onclick="addWorkingHours()" class="bold add-working-days"><i class="fa fa-plus"></i>&nbsp; WORKING DAYS</a>
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

</body>

</html>

bootstrap-datepickerhtmljavascriptjquery