Блог

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

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

#input #bootstrap-4 #tooltip #popover

#ввод #bootstrap-4 #всплывающая подсказка #всплывающее окно

Вопрос:

Здравствуйте, я использую boostrap 4.3.1 и включил popper 1.14.7.

Обычно я могу добавлять поля ввода в содержимое всплывающего окна / всплывающей подсказки. Я не знаю с каких пор, но в тот момент, когда я помещаю поле ввода в содержимое, виден только текст.

Когда я смотрю в исходный код (скомпилированный html), я вижу, что popper или bootstrap удалили поля ввода. Я что-то не так? 

     var options = {
        html: true,
        // content: function(){ return $(".amountElec.popup").html();},
        placement: "bottom",
        container: "body"
    };
    
    $(function(){
        $('#manualinput').popover(options);
    })  
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.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>


<div id="manualinput" 
     data-container="body" 
     data-toggle="popover"  
     data-content="test <input name='test' type='text' value='2'>" 
     data-html="true" 
     data-placement="bottom">
     
     OPEN TOOLTUP
</div>

Ответ №1:

Это даже проще, чем вы думаете:

Добавить

 sanitize: false

в качестве опции конфигурации, если вы хотите вообще отключить очистку. Если вы просто хотите адаптировать белый список, вы правы в своем решении

https://github.com/twbs/bootstrap/blob/438e01b61c935409adca29cde3dbb66dd119eefd/js/src/tooltip.js#L472

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

1. Вы спасли мой день!

2. У меня тоже! Тем более, что этого нет в официальной документации bootstrap.

Ответ №2:

Я нашел решение…

В моем случае я добавляю это в javascript:

         var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList;
        myDefaultWhiteList.input = [];

https://getbootstrap.com/docs/4.3/getting-started/javascript/#sanitizer

Ответ №3:

После поиска в консоли отладки я нашел кое-что в tooltip.js из начальной загрузки.

content = sanitizeHtml (содержимое, this.config.whiteList, this.config.sanitizeFn)

   setElementContent($element, content) {
    if (typeof content === 'object' amp;amp; (content.nodeType || content.jquery)) {
      // Content is a DOM node or a jQuery
      if (this.config.html) {
        if (!$(content).parent().is($element)) {
          $element.empty().append(content)
        }
      } else {
        $element.text($(content).text())
      }

      return
    }

    if (this.config.html) {
      if (this.config.sanitize) {
        content = sanitizeHtml(content, this.config.whiteList, this.config.sanitizeFn)
      }

      $element.html(content)
    } else {
      $element.text(content)
    }
  }

Функция sanitizeHtml удаляет поля ввода :(.

Ответ №4:

Я только что отключил дезинфекцию по умолчанию (глобально):

 $.fn.tooltip.Constructor.DEFAULTS.sanitize = false;
$.fn.popover.Constructor.DEFAULTS.sanitize = false;

https://getbootstrap.com/docs/3.4/javascript/#default-settings