Bootstrap 4 input field in popover

前端未结

关注

 1  749

清歌不尽 2021-01-06 12:21

The problem is described in title. I have a Bootstrap 4 modal and one popover with input field with buttons. In IE 11 everything is ok, but in Firefox input loses focus.

1条回答

孤街浪徒 (楼主)

2021-01-06 12:37

There is a simple mistake, you have tabindex="-1" in your modal so your input focus is removing by it.

For Bootstrap 4

MODAL + INPUT POPOVER

$(function () {
  $('[data-toggle="popover"]').popover({
      container: 'body',
      title: 'Search',
      html: true,
      placement: 'bottom',
      sanitize: false,
      content: function () {
          return $("#PopoverContent").html();
      }
  });
})

INPUT POPOVER + INSIDE CONTENT

$(function () {
    $('[data-toggle="popover"]').popover({
    container: 'body',
    html: true,
    placement: 'bottom',
    sanitize: false,
    content: 
    `
      
        
        
          
        
      
    `
    })
});

INPUT POPOVER + OUTSIDE CONTENT

$(function () {
    $('[data-toggle="popover"]').popover({
    container: 'body',
    html: true,
    placement: 'bottom',
    sanitize: false,
    content: function() {
        return $('#PopoverContent').html()
    }
    })
});

For Bootstrap 5

MODAL + INPUT POPOVER

const popover = new bootstrap.Popover(document.querySelector('.callPopover'), {
    container: 'body',
    title: 'Search',
    html: true,
    placement: 'bottom',
    sanitize: false,
    content() {
        return document.querySelector('#PopoverContent').innerHTML;
    }
})

INPUT POPOVER + INSIDE CONTENT

const popover = new bootstrap.Popover(document.querySelector('[data-toggle="popover"]'), {
    container: 'body',
    title: 'Search',
    html: true,
    placement: 'bottom',
    sanitize: false,
    content: `
      
        
          
      
    `
})

INPUT POPOVER + OUTSIDE CONTENT

const popover = new bootstrap.Popover(document.querySelector('.callPopover'), {
    container: 'body',
    title: 'Search',
    html: true,
    placement: 'bottom',
    sanitize: false,
    content() {
        return document.querySelector('#PopoverContent').innerHTML;
    }
})

0 讨论(0)