Блог

Главная - Вопросы по программированию - Поле ввода начальной загрузки 4 во всплывающем окне

Поле ввода начальной загрузки 4 во всплывающем окне

#javascript #jquery #css #bootstrap-4 #bootstrap-5

#javascript #jquery #css #bootstrap-4 #начальная загрузка-5

Вопрос:

Проблема описана в заголовке. У меня есть модальный загрузчик 4 и один всплывающий с полем ввода с кнопками. В IE 11 все в порядке, но в Firefox ввод теряет фокус.

Всплывающее окно:

 $('[data-toggle="popover"]').popover({
    container: "body",
    sanitize: false,
    content: function () {
        return $("#choose-user-popover-content").html();
    }
}).on('shown.bs.popover', function () {
    $('#ExecutorSNPSearchStr').focus();
});

Всплывающий html:

 <div id="choose-user-popover-content" style="display: none;">
<div class="row">
    <div class="col">
        <div class="input-group">
            <input type="text" class="form-control" id="ExecutorSNPSearchStr" aria-describedby="ExecutorSNPSearchStrAddon"/>
            <div class="input-group-append" id="ExecutorSNPSearchStrAddon">
                <button class="btn btn-sm btn-outline-info w-3" type="button">
                    <i class="fas fa-search"></i>
                </button>
                <button class="btn btn-sm btn-outline-danger w-3" type="button">
                    <i class="fas fa-trash-alt"></i>
                </button>
            </div>
        </div>
    </div>
</div>

https://i.stack.imgur.com/rTe2q.png

Кто-нибудь может сказать, в чем причина этого, и как решить эту проблему?

UPD: я воссоздал ситуацию в отдельном html-файле. 

 $(function () {
  $('[data-toggle="popover"]').popover({
      sanitize: false,
      content: function () {
          return $("#PopoverContent").html();
      }
  });
}).on('shown.bs.popover', function () {
  $('#ExecutorSNPSearchStr').focus();
});  
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
   
<section>
    <div id="PopoverContent" style="display: none;">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Recipient's username"
                aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
            <div class="input-group-append" id="button-addon1">
                <button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
                    data-html="true" data-title="Search">
                    <i class="fas fa-search"></i>
                </button>
            </div>
        </div>
    </div>
</section>
<section>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Test modal</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">amp;times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Recipient's username"
                                        aria-label="Recipient's username with two button addons"
                                        aria-describedby="button-addon4">
                                    <div class="input-group-append" id="button-addon4">
                                        <button class="btn btn-outline-primary" type="button" data-toggle="popover"
                                            data-trigger="click" data-placement="bottom" data-html="true"
                                            data-title="Search">
                                            <i class="fas fa-user-plus"></i>
                                        </button>
                                        <button class="btn btn-outline-danger" type="button">
                                            <i class="fas fa-user-minus"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="container">
    <div class="row">
        <div class="col mt-5">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                Launch demo modal
            </button>
        </div>
    </div>
</div>
    
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>

Комментарии:

1. вам нужно предоставить весь его код, чтобы мы знали, в чем проблема

2. Я воссоздал ситуацию в отдельном html-файле.

3. Ни у кого нет идей?

4. о каком типе фокуса вы говорите?

5. Поле ввода во всплывающем окне не имеет фокуса ввода, его нельзя ввести в Firefox.

Ответ №1:

Существует простая ошибка, у вас есть tabindex="-1" в вашем модальном, поэтому ваш фокус ввода удаляется им.

Для начальной загрузки 4

МОДАЛЬНЫЙ ВВОД ВСПЛЫВАЮЩЕГО окна

 $(function () {
  $('[data-toggle="popover"]').popover({
      container: 'body',
      title: 'Search',
      html: true,
      placement: 'bottom',
      sanitize: false,
      content: function () {
          return $("#PopoverContent").html();
      }
  });
})  
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<section>
    <div id="PopoverContent" class="d-none">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Recipient's username"
                   aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
            <div class="input-group-append" id="button-addon1">
                <button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
                        data-html="true" data-title="Search">
                    <i class="fas fa-search"></i>
                </button>
            </div>
        </div>
    </div>
</section>
<section>
    <div class="modal fade" id="exampleModal" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Test modal</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">amp;times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Recipient's username"
                                        aria-label="Recipient's username with two button addons"
                                        aria-describedby="button-addon4">
                                    <div class="input-group-append" id="button-addon4">
                                        <button class="btn btn-outline-primary" type="button" data-toggle="popover">
                                            <i class="fas fa-user-plus"></i>
                                        </button>
                                        <button class="btn btn-outline-danger" type="button">
                                            <i class="fas fa-user-minus"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="container">
    <div class="row">
        <div class="col mt-5">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                Launch demo modal
            </button>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>

ВВОД ВСПЛЫВАЮЩЕГО окна ВНУТРЕННЕЕ СОДЕРЖИМОЕ

 $(function () {
    $('[data-toggle="popover"]').popover({
    container: 'body',
    html: true,
    placement: 'bottom',
    sanitize: false,
    content: 
    `<div id="PopoverContent">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Recipient's username"
             aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
        <div class="input-group-append" id="button-addon1">
          <button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
              data-html="true" data-title="Search">
            <i class="fas fa-search"></i>
          </button>
        </div>
      </div>
    </div>`
    })
});  
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"> 

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title">Click to toggle popover</button>

<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

ВВОД ВСПЛЫВАЮЩЕГО ОКНА ВНЕШНИЙ КОНТЕНТ

 $(function () {
    $('[data-toggle="popover"]').popover({
    container: 'body',
    html: true,
    placement: 'bottom',
    sanitize: false,
    content: function() {
        return $('#PopoverContent').html()
    }
    })
});  
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"> 

<div id="PopoverContent" class="d-none">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Recipient's username"
         aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
    <div class="input-group-append" id="button-addon1">
      <button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
          data-html="true" data-title="Search">
        <i class="fas fa-search"></i>
      </button>
    </div>
  </div>
</div>

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title">Click to toggle popover</button>

<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Для начальной загрузки 5

МОДАЛЬНЫЙ ВВОД ВСПЛЫВАЮЩЕГО окна

 const popover = new bootstrap.Popover(document.querySelector('.callPopover'), {
    container: 'body',
    title: 'Search',
    html: true,
    placement: 'bottom',
    sanitize: false,
    content() {
        return document.querySelector('#PopoverContent').innerHTML;
    }
})  
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"> 

<section>
    <div id="PopoverContent" class="d-none">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
            <button class="btn btn-outline-primary" type="button" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-html="true" data-bs-title="Search">
                <i class="fas fa-search"></i>
            </button>
        </div>
    </div>
</section>
<section>
    <div class="modal fade" id="exampleModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Test modal</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4">
                                    <button class="btn btn-outline-primary callPopover" type="button" data-bs-toggle="popover">
                                        <i class="fas fa-user-plus"></i>
                                    </button>
                                    <button class="btn btn-outline-danger" type="button">
                                        <i class="fas fa-user-minus"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="container">
    <div class="row">
        <div class="col mt-5">
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
                Launch demo modal
            </button>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>

ВВОД ВСПЛЫВАЮЩЕГО окна ВНУТРЕННЕЕ СОДЕРЖИМОЕ

 const popover = new bootstrap.Popover(document.querySelector('[data-toggle="popover"]'), {
    container: 'body',
    title: 'Search',
    html: true,
    placement: 'bottom',
    sanitize: false,
    content: `<div id="PopoverContent">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Recipient's username"
             aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
          <button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
              data-html="true" data-title="Search">
            <i class="fas fa-search"></i>
          </button>
      </div>
    </div>`
})  
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title">Click to toggle popover</button>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>

ВВОД ВСПЛЫВАЮЩЕГО ОКНА ВНЕШНИЙ КОНТЕНТ

 const popover = new bootstrap.Popover(document.querySelector('.callPopover'), {
    container: 'body',
    title: 'Search',
    html: true,
    placement: 'bottom',
    sanitize: false,
    content() {
        return document.querySelector('#PopoverContent').innerHTML;
    }
})  
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<div id="PopoverContent" class="d-none">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Recipient's username"
         aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
    <button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
          data-html="true" data-title="Search">
        <i class="fas fa-search"></i>
    </button>
  </div>
</div>

<button type="button" class="btn btn-lg btn-danger callPopover" data-toggle="popover" title="Popover title">Click to toggle popover</button>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>

Комментарии:

1. Отлично! Большое вам спасибо! Я потратил несколько дней, пытаясь понять проблему. Странно, что в документации Bootstrap 4 ничего нет о таких вещах. Еще раз большое вам спасибо!

2. очень хороший улов @NishargShah проблема странная, мы должны сообщить об этой проблеме в репозиторий начальной загрузки, чтобы они могли хотя бы добавить ее в свои документы

3. да, я думаю об этом, чтобы создать проблему в репозитории github, но после решения этого я думаю, что это глупое решение

Ответ №2:

Мы запоздали с этим, но посмотрим https://github.com/twbs/bootstrap/issues/36692#issuecomment-1178261690

Короче говоря, более новые версии Bootstrap более строго обеспечивают сохранение фокуса внутри модального. По умолчанию, если внутри модального есть всплывающее окно, оно сгенерирует свой собственный контейнер всплывающего окна вне самого модального, поэтому из-за принудительного использования фокуса он будет недоступен. Решение состоит в том, чтобы явно установить контейнер для всплывающего окна не как «тело», а как модальный (или явный контейнер внутри модального).

Ответ №3:

Я опаздываю на эту тему, но у меня такая же проблема с использованием Bootstrap 5.

Я скопировал ответ кода начальной загрузки 5 в свои собственные файлы, и он работал нормально.

Затем я изменил html, чтобы включить сокращенную версию моего модального (минус tabindex = 1) и моего всплывающего окна, и он все еще работал.

Затем я заменил ссылку на бета-версию Bootstrap 5 ссылкой на последнюю полную версию, и исходная проблема вернулась, невозможно ввести что-либо в поле ввода popover.

Я включаю свой код ниже на случай, если кто-нибудь сможет обнаружить ошибку, но это похоже на ошибку Bootstrap 5.

 <!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
</head>

<body>

<section>
    <div id="status-form" class="card col-md-6 offset-md-1 d-none mb-2">
        <div class="card-header"><h5 id="statusHeader"> Add new status</h5></div>
        <div class="card-body">
            <input id='popoverStatusID' type='hidden' disabled>
            <input id='popoverMode' type='hidden' value='add' disabled>
            <div class="mb-2 ms-2">
                <input id='popoverStatusEdit' type='text' maxlength='20' class='form-control' value=''>
            </div>
            <span id='status-message' class='text-danger' value=''></span>
        </div>
        <div class="card-footer text-muted">
            <div class="mt-1 ms-2 mb-2">
                <button id="close-status-form" class='btn btn-default btn-sm' type='button'>
                    Close
                </button>
                <button id="submit-status-form" class='btn btn-primary btn-sm float-end' type='button'>
                    Submit
                </button>
            </div>
        </div>
    </div>
</section>
<section>
    <div id="location-maintenance" class="modal fade" role="dialog" data-bs-backdrop="static">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <form id="location-form"
                " method="POST" action="#">
                <div class="modal-header d-inline">
                    <h4 id="location-title" class="ms-2">Edit Location</h4>
                    <p id="edit-location-name" class="ms-2"></p>
                </div>

                <div class="col-md-6">
                    <div class="form-floating">
                        <select id="location-status-text" class="form-select mb-2" aria-label="Role" placeholder="xxx" name="RoomStatusText">
                            <option value="17" data-active="1">Active
                            </option>
                            <option value="18" data-active="0">Blocked
                            </option>
                            <option value="19" data-active="0">ISO
                            </option>
                            <option value="268" data-active="0" selected>Onboarding
                            </option>
                        </select>
                        <label class="text-muted">Status</label>
                    </div>
                </div>

                <div class="row mb-2">
                    <div class="col-md-2">
                        <button class="btn btn-primary status-maintenance" type="button" data-mode="add">Add</button>
                    </div>
                </div>
                <div class="modal-footer">
                    <a class="btn btn-danger btn-delete d-none" role="button" data-bs-toggle="modal" data-bs-target="#modal-delete" title="Delete location" href="#" data-type="location">Delete...<i class="fas fa-times-circle"></i>
                    </a>
                    <div>
                        <button id="cancel-location-edit" type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </div>
                <span id="add-message" class="text-success fw-bold"></span>
                </form>
            </div>

        </div>
    </div>
</section>
<div class="container">
    <div class="row">
        <div class="col mt-5">
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#location-maintenance">
                Launch demo modal
            </button>
        </div>
    </div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<script>
    const popover = new bootstrap.Popover(document.querySelector('.status-maintenance'), {
        container: 'body',
        title: 'Search',
        html: true,
        placement: 'bottom',
        sanitize: false,
        content() {
            return document.querySelector('#status-form').innerHTML;
        }
    })
</script>