从输出html中删除了工具提示弹出框内的引导输入字段答案

【问题标题】：Bootstrap input field inside tooltip popover removed from output html从输出html中删除了工具提示弹出框内的引导输入字段
【发布时间】：2019-07-30 17:49:09
【问题描述】：

您好，我正在使用 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>

【问题讨论】：

标签： input bootstrap-4 tooltip popover

【解决方案1】：

这比你想象的更容易：

添加

sanitize: false

如果您想完全禁用清理，则作为配置选项。如果你只是想调整白名单，你的解决方案是对的

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

【讨论】：

你拯救了我的一天！
我的也是！特别是因为它不在官方引导文档中。

【解决方案2】：

我找到了解决办法...

我的情况是将此添加到 javascript：

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

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

【讨论】：

【解决方案3】：

在调试控制台中搜索后，我在 bootstrap 的 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 函数删除输入字段 :(.

【讨论】：