wake-up-neo.com

Eingabefelder mit transparentem Hintergrund können im IE8 nicht angeklickt werden

Ich habe ein absolut positioniertes Eingabefeld in einem Formular. Das Eingabefeld hat einen transparenten Hintergrund:

.form-page input[type="text"] {
    border: none;
    background-color: transparent;
    /* Other stuff: font-weight, font-size */
}

Überraschenderweise kann ich dieses Eingabefeld nicht durch Anklicken im IE8 auswählen. Es funktioniert jedoch perfekt in Firefox. Das gleiche passiert für background: none. Wenn ich die Hintergrundfarbe ändere:

    Hintergrundfarbe: rot;

Es funktioniert einwandfrei, daher ist dies ein Problem, das mit dem transparenten Hintergrund zusammenhängt. Durch das Festlegen eines Rahmens wird das Eingabefeld auswählbar, indem Sie nur auf den Rahmen klicken.

Gibt es eine Problemumgehung für anklickbare Eingabefelder mit transparentem Hintergrund in IE8?

pdate: Beispiel. Kommentar entfernen background-color und das Eingabefeld ist wählbar. Sie können auch auf das Auswahlfeld klicken und das Eingabefeld durch Drücken von Umschalt + Tabulator fokussieren.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head></head><body>

<style type="text/css">
  input[type="text"] {
    border: none;
    background: transparent;
    /*background-color: blue;*/
  }
  #elem528 { position:absolute; left:155px; top:164px; width:60px; height:20px; }
  #elem529 { position:absolute; left:218px; top:164px; width:40px; height:20px; }
</style>

<img src="xxx.png" alt="" width="1000" height="1000">
<input id="elem528" maxlength="7" type="text">
<select id="elem529"></select>

</body></html>
50
Viliam

Ich kann ein solches Problem im IE8 nicht reproduzieren. Vollständiger Testfall? Sind Sie sicher, dass es kein Überlagerungsproblem gibt, das dazu führt, dass ein anderes transparentes Element den anklickbaren Bereich bedeckt?

Hat Einstellung background-image Einen Unterschied machen? Was ist mit einem transparenten GIF?

ETA: Neugierig! Es ist eigentlich ein IE7-Fehler. Für mich zeigt Ihr Beispiel das beschriebene Verhalten in IE7, aber in IE8 nur im EmulateIE7-Modus. im nativen IE8-Rendering ist es behoben. Im Allgemeinen sollten Sie sicherstellen, dass Sie nicht auf das IE7-Rendering zurückgreifen, indem Sie ein geeignetes X-UA-Compatible Header/Meta; aber ja, setzen Sie die background-image zu einem transparenten GIF behoben das Problem für mich. Tsk, wir brauchen das leere GIF auch heute noch, oder?

27
bobince

Sie müssen ein (transparentes) Hintergrundbild definieren.

Nur für den Fall, dass sich jemand dafür interessiert. Eine der vorgeschlagenen Problemumgehungen ....

8
Viliam

Bitte geben Sie den HTML-Code für das Eingabeelement an.

Wie haben Sie das Eingabeelement definiert? Der folgende Code funktioniert in IE8 (IE 8.0.7600 Windows). Ich habe dies im IE8 versucht und konnte den Eingabebereich gut auswählen.

<html>

<head>

<style>
.form-page input[type="text"] {
        border: none;
        background-color: transparent;
        /* Other stuff: font-weight, font-size */
}
</style>
</head>

<body>

<input type="text" name="test" value="test" id="test"/>

</body>
</html>
7
user250120

Gib dem Eingabefeld einfach ein transparentes Hintergrundbild und es wird funktionieren ...

Beispiel:

#search .input {
width:260px;
padding:3px 5px;
border:0;
background:url(../images/trans.gif);}
6
Franky

Hier ist ein sehr einfacher Testfall:

<html>
    <head>
    </head>
    <body style="direction: ltr;">
        <br/><br/><br/>
        <INPUT style="WIDTH: 100%;" />

        <DIV style="POSITION: absolute; TOP: 58px; RIGHT: 193px; WIDTH: 300px;">
            <INPUT style="WIDTH: 100%; background-color: transparent;"/>
        </DIV>
    </body>
</html>

Bei der Ausführung in IE8 sollte der Fokus auf dem zugrunde liegenden Textfeld und nicht auf dem absolut positionierten Textfeld liegen.

Unsere Lösung bestand darin, sowohl die transparente Hintergrundfarbe als auch das transparente Hintergrundbild festzulegen:

<INPUT style="WIDTH: 100%; background-color: transparent; background-image: url('transparent.gif');"/>
2
user328508

Ich habe das gleiche Problem mit IE10 unter Windows 7 gefunden. Beide der folgenden Methoden haben das Problem für mich behoben.


Frankys Methode mit einem transparenten Hintergrundbild ...

background:url(/images/transparent.gif);


Sketchfemme-Methode unter Verwendung einer RGBA-Hintergrundfarbe mit einer Deckkraft von '0'

background-color:rgba(0,0,0,0);


Jim Jeffers Vorschlag zur Bearbeitung der Z-Indizes hat bei mir nicht funktioniert.

2
Benjamin Walsh

Wie Bobince bemerkte, handelt es sich um einen IE7-Fehler. Ich fand es manchmal bequem, es durch Hinzufügen eines value=" &nbsp; &nbsp; &nbsp; " Zu lösen. Verwenden Sie so viele nicht unterbrechende Leerzeichen wie erforderlich, um die anklickbare Fläche groß genug zu machen. Abhängig von Ihrer App müssen Sie diese möglicherweise später entfernen.

1
miles

IE entscheidet in seiner unendlichen Weisheit, das Objekt nicht zu rendern, weil es denkt, dass es nichts zu rendern gibt. Es gibt zahlreiche Möglichkeiten, dies zu beheben, aber im Grunde müssen Sie IE etwas zum Kauen geben.

Das Hinzufügen eines 'value = x' zum Eingabe-Tag selbst funktioniert definitiv. Aber mehr als wahrscheinlich ist es nicht die beste Lösung. Mit einer einfachen Farbe: Schwarz (ohne Fokus) kann das Element mit Registerkarten versehen werden. Durch Hinzufügen von ': focus' zum Eingabestil kann das Element gerendert werden.

Versuche dies:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head></head><body>

<style type="text/css">
  input[type="text"]:focus {
    border: none;
    background: transparent;
    /*background-color: blue;*/
  }
  #elem528 { position:absolute; left:155px; top:164px; width:60px; height:20px; }
  #elem529 { position:absolute; left:218px; top:164px; width:40px; height:20px; }
</style>

<img src="xxx.png" alt="" width="1000" height="1000">
<input id="elem528" maxlength="7" type="text">
<select id="elem529"></select>

</body></html>
1
user250120
 background-image:url(about:blank);background-color:transparent;
1
reyhappen

Hatte das ähnliche Problem -> IE8 Textbox konnte nicht bearbeitet werden (wenn Wrapper meiner App Position hat: Absolut). Klick funktionierte nur im Rand. Gefüllt mit Farbe und transparent hat auch nicht funktioniert. Mit der folgenden Änderung des Doctype wird das Problem behoben.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Quelle: http://www.codingforums.com/showthread.php?p=1173375#post1173375

0

Eigentlich war es in meinem Fall so

text-indent: -9999px 

Früher habe ich den Text entfernt, mache das nicht und er ist wieder anklickbar.

0
e-anima