javascript - 输入字段 - 当 onClick 事件时删除值，如果未设置则恢复该值

Question

在输入字段中我设置了默认值。在字段内单击时必须删除默认值，但如果插入的值为空白并且鼠标光标离开字段，则必须恢复默认值。默认值必须写入数据库。

例如:

默认值:0

当我离开输入字段且值为空时，将恢复默认值。

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

点击后输入任意值如何恢复默认值？

谢谢

Answer 1

只需将 listener 附加到 focus 和 blur 事件的输入，如下例所示；

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