Was passiert mit dieser Taste?

GESAMTE LIVE-CODE: http://jsfiddle.net/9GWtT/Was passiert mit dieser Taste?

HTML-Code:

<html> 
<body> 
    <form> 
     <fieldset><p> 
      <label>Username: <input type="text" name="user" id="user" /></label></p><br /><p> 
      <label>Password: <input type="password" name="passw" id ="passw" /></label></p> 
      <label><input type="submit" value="Log in" name="submitBUT" class="regbut" id="submitBUT" /><div id="helllo"></div></label> 
     </fieldset> 
    </form> 
</body>

CSS CODE:

input.regbut { 
    width: 65px; 
    height: 25px; 
    background-color: #3C0; 
    color: white; 
    font-weight: bold; 
    border-radius: 7px; 
    //-moz-border-radius: 7px; 
    border-top: 1px solid #CCC; 
    border-left: 1px solid #CCC; 
    border-right: 1px solid #777; 
    border-bottom: 1px solid #777; 
} 
input.regbut:hover { 
    border-top: 1px solid #777; 
    border-left: 1px solid #777; 
    border-right: 1px solid #CCC; 
    border-bottom: 1px solid #CCC; 
} 
input.regbut:active { 
    background-color: #390; 
}

JavaScript-Code:

var subBut = document.getElementById('submitBUT'); 
var users = ['hithere', 'Peter112', 'Geksj', 'lOsja', 'fInduS', '323DssaAA', 'f1fsus']; 
var passes = ['mllesl', 'Petboy', 'Heneeesh', 'Olga', '234dasdf77/', 'minls', 'ew832ja']; 
var output = []; 

function submi(u, p) { 
    for (var i = 0; i < users.length; i++) { 
     if (users[i] == u) { 
      output.push(i); 
     } 
    } 
    for (var o = 0; o < output.length; o++) { 
     if (passes[output[o]] == p) { 
      return p + ' was a correct password.'; 
     } 
    } 
    return 'Error, please try again'; 
} 
subBut.onclick = function() { 
    document.getElementById('helllo').innerHTML = 
    submi(document.getElementById('user').value, document.getElementById('passw').value); 
    return false; 
};

Okay, der Button funktioniert zunächst gut, aber nachdem Sie einmal darauf geklickt haben, geschieht die: hover -Eigenschaft plötzlich weit außerhalb des Buttons selbst, auch wenn Sie den Text in der Beschriftung nach dem Klick überfliegen die Taste. Warum ist das??

Quelle

2010-12-31 DarkLightA

Was ist Ihr Browser? Siehe keine Anomalien in FF. –

** Bitte ** * relevanten * Code ** in der Frage **, wie ich letztes Mal erwähnt: http://stackoverflow.com/questions/4570049/whats-wrong-in-this-jiraskis-code –

I Verwenden Sie Chrome. (15char) – DarkLightA

dieBewegenfür das Ergebnis außerhalb des Labels für die Schaltfläche: http://jsfiddle.net/pgS5j/

Quelle

2010-12-31 15:31:21 zsalzbank

Ich glaube, Sie sind der Verwendung des Label-Elements möglicherweise die Ursache hier. Ich habe nur verwendet das Label-Element wie so nächsten an einen Eingang

Versuchen Sie Ihre HTML-Organisation verwendet/gesehen ...

(ich meine Formen in DL bevorzugen, aber es ist wirklich bis zu Ihnen.)

<dl> 
<dt>Username:</dt> 
<dd><input type="text" id="userName" /><label for="#userName" /></dd> 
<dt>Password:</dt> 
<dd><input type="password" id="pass" /><label for="#pass" /></dd> 
<dt></dt> 
<dd><input type="submit" name="formSubmit" id="formSubmit" /><div id="hello"></div></dd> 
</dl>

(Obwohl ich einfach glauben, dass die Eingabeelemente von Etiketten zu entfernen und sie auf NEXT um Ihre Eingaben zu setzen, den Trick tun würde)

Quelle

2010-12-31 15:31:08

Die Verwendung von Beschriftungen des OPs ist korrekt, was die Platzierung betrifft. Das Einschließen des Formularsteuerelements in ein Label gibt diesem Label eine implizite Assoziation mit dem Steuerelement und macht das 'for' unnötige Attribut W3C. http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1 – stevelove

an wieder auf die Veränderungen der Suche Sie empfohlen: Ihr Beispiel nimmt tatsächlich das Etikett ("Username: “,‚Passwort:‘) und verschiebt sie * out * das Etikettenelementes und in eine Definition Begriff Element stattdessen das Label-Element leer verlassen und keinen Zweck dient, verwendet Definitionsliste Markup oder nicht, den Wert negiert haben. das Etikettelement vollständig zu verwenden. – stevelove

@steve - Interessant, ich habe diese Art von Markup noch nie gesehen (daher glaube ich). Ich war einfach zeigen, wie ich das Markup organisieren würde - nicht, wie über ein Etikett eine aktuelle Nachricht anzuzeigen ..., die über JS geändert werden können. –

Was passiert mit dieser Taste?

Antwort

Verwandte Themen