Поле ввода начальной загрузки внутри всплывающей подсказки удалено из выходного HTML - PullRequest
Новая
       22

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

1 голос
/ 08 марта 2019

Здравствуйте, я использую boostrap 4.3.1 и включенный поппер 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>

Ответы [ 3 ]

1 голос
/ 09 марта 2019

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

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

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

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

1 голос
/ 18 апреля 2019

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

Добавить 

sanitize: false

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

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

0 голосов
/ 09 марта 2019

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

content = sanitizeHtml (content, this.config.whiteList, this.config.sanitizeFn) 

  setElementContent($element, content) {
    if (typeof content === 'object' && (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 удаляет поля ввода: (..

...