我有一个项目,其中使用带有表单和 ckeditor 的模式,但链接输入不起作用。
这是重现此问题的小提琴:
http://jsfiddle.net/8t882a2s/3/
以及这个例子的代码。
HTML:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" contenteditable="true" id="myModalLabel">Modal title</h4>
</div>
<div id="bodyModal" contenteditable="true" class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-default navbar-btn margin-right-button-nav" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-new-window"></span> Edit Modal</button>
JS:
CKEDITOR.disableAutoInline = true;
$(document).ready(function() {
$('#myModal').on('shown.bs.modal', function () {
CKEDITOR.inline('myModalLabel');
CKEDITOR.inline('bodyModal');
})
});
这不完全是我的代码,但错误是相同的。如果您单击模式,然后尝试添加链接,则无法在输入字段中写入网址。
谢谢:)
互联网上的很多答案都提出了多种修复方法, 这对我有用,对于 bootstrap 4 项目:
$.fn.modal.Constructor.prototype._enforceFocus = function() {
var $modalElement = this.$element;
$(document).on('focusin.modal',function(e) {
if ($modalElement.length > 0 && $modalElement[0] !== e.target
&& !$modalElement.has(e.target).length
&& $(e.target).parentsUntil('*[role="dialog"]').length === 0) {
$modalElement.focus();
}
});
};
如果您在 bootstrap 3 上运行,则覆盖
$.fn.modal.Constructor.prototype.enforceFocus
insdead。
要解决这个问题只需要做以下几件事:
在 body 标签上添加自定义 CSS 规则
body {
--ck-z-default: 100;
--ck-z-modal: calc( var(--ck-z-default) + 999 );
}
将模态选项焦点值设置为 false
$( '#basicModal' ).modal( {
focus: false
} );
<div class="modal fade " data-focus="false" id="basicModal">
对我来说,从模态属性中删除
tabindex="-1"
可以解决问题。
没错!对我来说 data-focus="false" 解决了所有问题
data-bs-focus="false" 解决我的问题。非常感谢@VDWWD