JavaScriptで入力フィールドをクリアする

Question

私はこの数時間前からこれを見てきましたが、私が探しているものを実際に達成することはできません。私は現在、次の二つの入力があります：最初

<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)" /> 

、テキストがグレーの入力を、私は次のJavaScriptはONFOCUSとの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; 
    } 
} 

をフィールドへの入力を開始してフィールドを離れた後に戻ると、入力を再度クリアしません（ユーザーが入力したものが格納されるため）。私は状態に応じて1と0の間で交替することができる何らかの種類の変数でこれを達成することを考えましたが、それはちょっと見えませんでした。このJSの初心者のための任意の洞察は大いに感謝しています。

Answer 1

inputFocusedでは、入力フィールドの値は状態に関係なくクリアされます。たぶん私はあなたの意図を誤解していますが、コントロールに焦点を当てるときに、なぜあなたはその価値を捨てるでしょうか？

更新

：各要素に、「 defaultTextValue」属性を追加するには、あなたが最初のフォーカスイベントの入力のデフォルト値をキャプチャすることができます。別の方法として、文書の onLoadイベントを使用してデフォルト値を取得する方法があります。以下のスニペットは、テキストボックスがフォーカスされ、その値が初期化されたデフォルト値と同じである場合にテキストボックスをクリアします。 jscharfのコードに追加

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

フィールドの値が現在の初期値であるかどうかを確認することができます。

Answer 3

）あなたは「ユーザ名」や「パスワード」のパスワードのユーザー名のいずれかを持っているユーザーを困らせるかもしれませんが、あなたはおそらくとにかく8はず、あなたは入力のtitle属性を使用することができます各入力のデフォルト値を格納するフィールド。これは、人々は、彼らがそれにカーソルを合わせると、入力フィールドが含まれている必要があります知っているさせるのユーザビリティ利点があります。

<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)" /> 

と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'; 
    } 
} 

また

、ないあなたがやって考えられてきたかどうかわからそれが、あなたがしたい場合は、CSSでの入力のフォーカスの色を制御することができます（もちろん、IE6では動作しません...しかし、あなたはIE6のみスタイルシートで上書きすることができます）：

あなたが追加することができます

input { 
    color: #AAA; 
} 


input:focus { 
    color: #000; 
} 

Answer 4

カスタマイズされたあなたの好きなようにあなたのHTMLページのDOMに属性を追加すると、多くの柔軟性が得られます。