Löschen der Eingabefelder mit JavaScript

Question

Ich habe das für die letzten Stunden geschaut und kann nicht wirklich erreichen, wonach ich suche. Im Moment habe ich die folgenden zwei Eingänge:

<input type="text" id="username" value="USERNAME" onfocus="inputFocused(this)" onblur="inputBlurred(this)" /> 
<input type="password" id="password" value="PASSWORD" onfocus="inputFocused(this)" onblur="inputBlurred(this)" /> 

zunächst die Eingänge Text grau ist, und ich habe die folgenden JavaScript-Funktionen onfocus und onblur:

var defaultInput = ""; 

function inputFocused(obj){ 
    defaultInput = obj.value; 
    obj.value = ""; 
    obj.style.color = "#000"; 
} 

function inputBlurred(obj){ 
    if(obj.value == ""){ 
     obj.style.color = "#AAA"; 
     obj.value = defaultInput; 
    } 
} 

Ich versuche, einen Weg zu finden, so Sobald ich anfange, in ein Feld zu tippen, lasse das Feld und dann zurück, es wird die Eingabe nicht mehr löschen (da es dann etwas enthält, das der Benutzer eingegeben hat). Ich habe darüber nachgedacht, dies mit einer Art Variable zu erreichen, die ich je nach Zustand zwischen 1 und 0 wechseln kann, aber das schien schlampig zu sein. Jeder Einblick für diesen JS Anfänger wird sehr geschätzt.

Answer 1

In inputFocused löschen Sie den Wert des Eingabefelds unabhängig von einem Status. Vielleicht verstehe ich deine Absicht falsch, aber warum würdest du den Wert bei der Fokussierung der Kontrolle vernachlässigen?

Aktualisiert: eine ‚defaultTextValue‘ Attribut für jedes Element hinzufügen, können Sie die Eingabe des Standardwert auf dem ersten Fokus Ereignis erfassen. Die Alternative besteht darin, das onLoad -Ereignis Ihres Dokuments zu verwenden, um die Standardwerte zu erfassen. Das folgende Snippet löscht die Textfelder, wenn sie fokussiert sind und deren Wert den Standardwerten entspricht, mit denen sie initialisiert wurden. Sie könnten Benutzer verärgern, die entweder einen Benutzernamen von ‚username‘ oder ein Passwort ‚password‘, aber Sie sollten wahrscheinlich sowieso 8-)

function inputFocused(obj) { 

    if (obj.defaultTextValue == undefined || obj.value == obj.defaultTextValue) { 
     obj.defaultTextValue = obj.value; 
     obj.value = ""; 
    } 
} 

function inputBlurred(obj) { 

    if (obj.value == "" && obj.defaultTextValue != undefined) { 
     obj.value = obj.defaultTextValue; 
    } 
} 

Answer 2

Sie können überprüfen, ob der Wert im Feld aktuell der Anfangswert ist.

Answer 3

zu jscharf Code hinzufügen, können Sie den Titel-Attribut des Eingangs verwenden Feld, um den Standardwert jeder Eingabe zu speichern. Dies hat den Vorteil, Usability Menschen wissen zu lassen, was das Eingabefeld enthalten soll, wenn sie den Mauszeiger über sie:

<input type="text" id="username" value="USERNAME" title="USERNAME" onfocus="inputFocused(this)" onblur="inputBlurred(this)" /> 
<input type="password" id="password" value="PASSWORD" title="PASSWORD" onfocus="inputFocused(this)" onblur="inputBlurred(this)" /> 

Und in dem js:

function inputFocused(obj){ 
    if(obj.title != obj.value){ 
     obj.value = ''; 
     obj.style.color = '#000'; 
    } 
} 

function inputBlurred(obj){ 
    if(obj.value == '' || obj.title == obj.value){ 
     obj.value = obj.title; 
     obj.style.color = '#AAA'; 
    } 
} 

auch nicht sicher, ob Sie darüber nachgedacht haben zu tun es, aber Sie können den Fokus Farbe des Eingangs in CSS steuern, wenn Sie wollen (funktioniert nicht in IE6 natürlich ... aber man kann in einem IE6 nur Sheet überschreiben):

input { 
    color: #AAA; 
} 


input:focus { 
    color: #000; 
} 

Answer 4

Sie hinzufügen Irgendwelche angepasst Attribute für das DOM Ihrer HTML-Seite, wie Sie möchten, gibt Ihnen viel Flexibilität.