#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
в качестве опции конфигурации, если вы хотите вообще отключить очистку. Если вы просто хотите адаптировать белый список, вы правы в своем решении
Комментарии:
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