jquery - 表单在 Bootstrap 轮播内不可编辑

Question

我试图打破长表单的单调性，通过将字段分布在几个 bootstrap 4 carousel div 上来制作多部分。这导致了奇怪的行为，即切换轮播幻灯片后，表单文本输入字段不可编辑(切换前可以编辑)。

Fiddle demo.

是什么原因导致此问题以及如何解决它？

(我还使用了一些 jquery 来显示适当的导航按钮，但我认为这不会干扰实际的输入可编辑性，例如:)

$('#carousel-control-previous').hide(); // start with prev button hidden
$('#btn-submit').hide(); // start with submit button hidden

Answer 1

这是由于轮播在焦点时劫持键盘造成的(以便键盘可以控制轮播滑动)。通过将 data-keyboard="false" 添加到 .carousel 包装器 div 来修复此问题。