Android Webview Wie kann man den Fokus/den Status eines Elements beim Laden entfernen?

Ich habe eine Android App mit Webview zum Laden und Anzeigen von HTML-Seiten. Wenn jedoch gerade eine neue Seite in die Webansicht geladen wurde, ist manchmal ein Element vorhanden, das bereits verschoben ist. Zum Beispiel ist das Element mit der ID "imhovered" bereits schwebend und hat den blauen Hintergrund des div (siehe Code unten). Dies geschieht ziemlich zufällig in Abhängigkeit von der Elementstruktur der aktuellen Seite und der Position der Berührung durch den Benutzer auf der vorherigen Seite.Android Webview Wie kann man den Fokus/den Status eines Elements beim Laden entfernen?

HTML-Code:

<body> 
<a href="link1" class="menu"> 
    <div class="qlink">here is div1</div> 
</a> 
<a href="link2" class="menu"> 
    <div class="qlink"> here is div2 </div> 
</a> 
<a id="imhovered" href="link3" class="menu"> 
    <div class="qlink">here is div3</div> 
</a>    
</body>

und die Stile:

.menu { 
    color: red; 
    text-decoration:none; 
    font-family:sans-serif; 
    font-size: 28px; 
} 
.menu:hover { 
    color: red; 
    background-color: green; 
} 

.qlink { 
    padding-left: 84px; 
    padding-top: 24px; 
    padding-bottom: 20px; 
    background: url(aaa.png) no-repeat scroll 28px 0px; 
} 
.qlink:hover { 
    background-color:blue; 
}

Meine Frage ist, wie diese falsch entfernen Zustand des Elements schwebte? Ich habe versucht, eine Weile mit Recherchen und eigenen Experimenten eine Lösung zu finden, habe aber immer noch keinen Erfolg. Im Folgenden sind, was ich während meiner Experimente herausfinden:

webview.clearFocus() -> funktioniert nicht

Javascript/jquery wenn dom ist fertig:

$(document).ready(function() { 
    alert($("*:hover").attr("id"));--> result:undefined 
    alert($("*:active").attr("id")); --> result:undefined 
    alert($("*:focus").attr("id")); --> result:undefined 
});

bedeutet dies, dass, wenn der Dom ist bereit Es gibt kein fokussiertes oder schwebendes Element.

Javascript/jquery in Körper onload (wenn Seite geladen ist):

alert($("*:hover").attr("id")); --> result:imhovered 
alert($("*:active").attr("id")); --> result:undefined 
alert($("*:focus").attr("id")); --> result:undefined

Dies bedeutet, dass die hovered- Zustand hat nun gerade erschienen als die Seite geladen wurde gerade. Ist es jetzt zu spät, irgendwelche Stiländerungen vorzunehmen, weil der falsche Hintergrund bereits angezeigt wird? Ist es ein Bug von Webkit/Android? Ich hoffe, ihr könnt mir einen Rat geben, um das zu lösen. Danke im Voraus!

Quelle

2012-04-11 bigbigteam

finde ich schließlich heraus, dass, wenn der Ladevorgang schnell genug ist, Benutzer nicht den Stil Änderung sehen, so dass ich die folgende Art Modifikation und es löst mein Problem:

window.onload = 
    function() { 
     var imhovered = $("*:hover"); 
     var children = imhovered.children(); 
     children.removeClass("qlink").addClass("qlinkNoHover"); 
     imhovered.bind('touchstart touchend', function() { 
     $(this).children().toggleClass('qlinkFixHovered'); 
    }); 
} 

.qlinkNoHover { 
    background-color:transparent; 
    padding-left: 84px; 
    padding-top: 24px; 
    padding-bottom: 20px; 
    background: url(aaa.png) no-repeat scroll 28px 0px; 
} 

.qlinkFixHovered { 
    background-color:blue !important; 
}

ich hoffe, dass dies helfen könnte jemand, der das gleiche Problem hat.

Quelle

2012-04-17 09:56:48 bigbigteam

Android Webview Wie kann man den Fokus/den Status eines Elements beim Laden entfernen?

Antwort

Verwandte Themen