javascript - 元素在键盘输入时不由自主地切换

Question

我正在创建我的第一个“真实”网站并尝试为我的布局和导航添加一些响应:www.dknytkom.dk/forside/

我对菜单项使用了很多 addClass 和 removeClass 以及与浏览器窗口宽度相对应的切换。到目前为止一切顺利。

问题是在我的 iPhone 上查看时，我的搜索字段在聚焦时消失了。我有一个模糊的怀疑，当我的 jquery 命令使它在文档宽度改变时消失时会发生这种情况。但我真的很茫然。

此外，即使我将它们设置为等待文档加载，但在单击菜单元素时，菜单项的切换往往会出错。有什么建议吗？

I've tried to create a jsfiddle from where the full code can be inspected:

$(document).ready(function() {

        var $introbrowserwidth= $(window).width();

        $soeg = $('a.soege-knap');
        $mobnav = $('a.mob-nav');
        $soegelist = $('div#search-table') ;
        $searchtable = $('#search-table') ;
        $soegefelt = $('ul.menu-item-holder > #searchfield');
        $menuknap = $('li a.menu-knap');
        $menu = $('div.menu')
        $menulist = $('.menu li')
        $emneoversigt = $('#emneoversigt')
        $emneoversigtlistitem = $('#emneoversigt li')
        $('.mob-nav').css('cursor','pointer');
        $temamenu = $('#tema-menu');


        if ($introbrowserwidth <=480) {
        $soegelist.addClass('displaynone');
        $soegefelt.addClass('displaynone');
        $('#menudiv').removeClass('displayblock').addClass('displaynone');
        $('#menudiv > ul').addClass('background-colour7 zebra');
        $('#menudiv a').addClass('displayblock');

        }       
        else{
                $menulist.removeClass('listitem').addClass('inlineblock');
                $menu.removeClass('displaynone').addClass('displayblock');
                $soegefelt.removeClass('displaynone').addClass('inlineblock');

            };

                $soeg.on("click",function(e) { 

                                            e.preventDefault();

                                            $soegelist.toggleClass('displayblock');
                                            $soegefelt.toggleClass('displayblock');
                                            $emneoversigt.removeClass().addClass('displaynone');
                                            $soeg.toggleClass('soege-knap-aktiv');
                                            $('#menudiv').removeClass('displayblock').addClass('displaynone');
                                            $('#menudiv > ul').removeClass('background-colour7 zebra');

                                            $menuknap.removeClass('menu-knap-aktiv');

                                            $('ul.menu-item-holder').toggleClass('expandheight');

                                            });


                    $menuknap.on("click",function(e) { 

                                            e.preventDefault();

                                            var $menutilstand =  $(window).width();

                                            $menulist.addClass('padding5');
                                            $menuknap.toggleClass('menu-knap-aktiv');
                                            $soeg.removeClass('soege-knap-aktiv');
                                            $soegelist.removeClass().addClass('displaynone');
                                            $('ul.menu-item-holder').removeClass('height expandheight')
                                            $('#menudiv > ul').addClass('background-colour7 zebra');


                                            if($soeg.hasClass('soege-knap-aktiv')) { 
                                            $soeg.removeClass('soege-knap-aktiv');
                                                $('ul.menu-item-holder').removeClass('height expandheight');

                                                };

                                                if ( ($menutilstand <=480) && ($('#menudiv').hasClass('displaynone')) ) {
                                                $('#menudiv').removeClass('displaynone').addClass('displayblock');
                                                $($menulist).removeClass('displayblock').addClass('padding5 listitem');
                                                $soegefelt.removeClass('displayblock');


                                                } else {    $('#menudiv').removeClass('displayblock').addClass('displaynone');}

                                            if ($('ul#menu-item-holder').hasClass('expandheight')){
                                                    $('ul#menu-item-holder').removeClass('expandheight').addClass('height')
                                                        }


                                            });



                                $('#indexbtn').on("click",function(e) { 
                                $('#emneoversigt').toggleClass('displayblock');
                            e.preventDefault(); })




$( window ).resize(function()
                                            {

                                    var browserwidth= $(window).width();

                                    $emneoversigt.removeClass('listitem').addClass('displaynone');
                                    $('.menu').removeClass('padding5');
                                    $emneoversigt.removeClass('displayblock').addClass('displaynone');
                                    $menuknap.removeClass('menu-knap-aktiv');
                                    $('*').removeClass('height expandheight')
                                    $('#menudiv > ul').removeClass('background-colour7 zebra');
                                    $soeg.removeClass('soege-knap-aktiv');


                                            if(browserwidth <= 480 ) {

                                                                $soegefelt.addClass('displaynone');
$temamenu.addClass('displaynone');
$soegelist.removeClass('inlineblock displayblock').addClass('displaynone');
                                                                $menu.addClass('displaynone');
                                                                $menulist.removeClass('inlineblock').addClass('listitem');
                                                                $('ul.menu-item-holder').removeClass('height');
                                                                    $menulist.removeClass('listitem displayblock').addClass('displaynone');
                                                                $('#menudiv').removeClass('displayblock');

                                            $('ul#menu-item-holder').addClass('height');


                                             }
                                            else {      $('li#searchfield').removeClass().addClass('inlineblock');
                                                                $soegelist.removeClass('displaynone').addClass('inlineblock');
                                                                $menu.addClass('displayblock');                                             $temamenu.removeClass('displaynone');                                                           $menulist.removeClass('listitem stroke displayblock ').addClass('padding5 inlineblock');
$('ul.menu-item-holder').addClass('height');
                                                        }
                                        })

 });

Answer 1

这是您搜索的 div:

<div id="search-table">
            <span>
                <form id="soege_form" action="<?=$grundsti;?>sider/soegning.php" method="post">
                    <input name="portal_id" type="hidden" value="<?=$valgt_portal_id;?>" />
                    <input placeholder="Søg i alle artikler"  name="soegeterm" border="none" id="soegeterm" type="text" size="30" maxlength="100" class="loginfelter venstrefloat boxshadow"  />
                    <button id="submit"  style="cursor: pointer;" class="sendknap venstrefloat button_bg">Søg</button>
                </form>
            </span>
        </div>

这是将 div 分配给变量的地方:

$soegelist = $('div#search-table') ;

这一行让它消失了:

    if ($introbrowserwidth <=480) {
            $soegelist.addClass('displaynone');
...