入力フィールド - onClickイベントが発生したときに値を削除し、設定されていない場合は値を復元します。

Question

入力フィールドにはデフォルト値が設定されています。フィールド内をクリックするとデフォルト値が削除されますが、値の挿入が空白でマウスカーソルがフィールドを離れる場合は、デフォルト値に戻す必要があります。デフォルト値は、データベースに書き込む必要があります。例えば

：

デフォルト値：I入力フィールドを残して、値が空白の場合は0

、デフォルト値が復元されます。

<input type="text" onclick="if(this.value == 'value') { this.value = ''; }" value="value" /> 

クリックした後に値を入力するとデフォルト値に戻すにはどうすればよいですか？

おかげ

Answer 1

ちょうど怒鳴る例のようfocusとblurイベントにご入力にlistenerを添付する。

var inputToCheck = document.getElementById("inputNum"); 
 
inputToCheck.initialValue = inputToCheck.value || ''; 
 

 
inputToCheck.addEventListener("focus",function(e) { 
 
    this.value == this.initialValue ? this.value = "" : ""; 
 
}); 
 

 
inputToCheck.addEventListener("blur",function(e) { 
 
    this.value == "" ? this.value = this.initialValue : ""; 
 
})

<input type="text" id="inputNum" value="0" />

jQueryを使って別：

var inputToCheck = $("#inputNum"); 
 
inputToCheck.data("initialValue", inputToCheck.val()); 
 

 
inputToCheck.on("focus",function(e) { 
 
    this.value == $(this).data("initialValue") ? this.value = "" : ""; 
 
}).on("blur",function(e) { 
 
    this.value == "" ? this.value = $(this).data("initialValue") : ""; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="inputNum" value="0" />

Answer 2

は、プレースホルダを使用していあなたの条件 に役立つ属性？

フィールドが空白の場合はデフォルト値が表示されますが、フィールド値を指定してフォームが送信されたときにはサーバーに送信されません。ユーザーが空白でフォームを送信したときにデフォルト値を保存する場合値をデフォルトに設定するフォームのobsubmitハンドラを作成するか、値が空白の場合はdbにデフォルト値を保存するためにサーバ側で実装します。