Question

当我将输入放入一个div（带有jade）时，我有一种奇怪的行为当我只在div幻灯片上放置标签时，没有问题。

但是当我尝试设置输入时，我会同时看到slide1和slide2（请参阅下面的问题和代码）。

除Bootstrap外，任何样式都应用于输入。即使我删除了所有样式并让最小值，输入也会导致问题。

div#owl-example.owl-carousel
        div 
            legend Which Type ?
            div.choice
                div.choice1
                    h2 Choice 1
                div.choice2
                    h2 choice2
        div
            legend Operating data
            div.row
                div.col-md-6
                    div.input-style
                        label Email : 
                            input(type='text', name="email",placeholder="placeholder", autofocus="autofocus" )
                    div.input-style
                        label Name : 
                            input(type='text', name="name",placeholder="placeholder")
                div.col-md-6
                    div.input-style
                        label adress : 
                             input(type='text', name="adress",placeholder="placeholder")

当我删除输入时一切正常。有人有想法解决它吗？

我真的不知道......

Answer 1

我相信您的问题与在轮播初始化后立即接收焦点的文本输入有关。我创造了一个小提琴，可以重现你的问题。由于小提琴的性质，默认情况下不会将焦点设置为幻灯片文本输入，因此我必须使用jQuery focus（）来模拟（我认为）在页面上发生的事情。

https://jsfiddle.net/Lgn3wqeq/1/

我自己遇到了这个问题，想出了将焦点设置到页面上另一个元素的相当笨拙的解决方案，并且只有当特定幻灯片可见时才将焦点设置在旋转木马幻灯片的文本输入上（也需要延迟重点直到css过渡完成后）。你可以这样做：

$('.myCarousel').owlCarousel({
    singleItem: true,
    afterAction: function (elem) {
        var item = elem.find('.item').eq(this.currentItem);
        setTimeout(function () { item.find('input').eq(0).focus(); }, 800);
    }
});

Owl Carousel在输入时看到两张幻灯片

1 个答案: