保存输入值，以便在用户留空时将其恢复为默认值

Question

我试图创建一个变量oldValue ，然后如果当前值=== ""那么它将更改回oldValue ，因为我使用for循环，我可以明确说出该值是什么。

代码正在改变input元素周围的div ，这就是.parentNode的原因

任何人都可以告诉我如何获得输入值并保存它，或者我的代码出错了。

var inputFocus = function(){
var inputs = document.getElementsByClassName("inputNoFocus");
for (i = 0; i < inputs.length; i++){
    var input = inputs[i];
    var oldValue = this.value;

    input.addEventListener("focus", function(){

        if(this.value === this.value){
            this.value = "";
        }
        this.parentNode.parentNode.setAttribute("class", "inputFocus");
    }, false);

    input.addEventListener("blur", function(){
        if(this.value === ""){
            this.value = oldValue;
        }
        this.parentNode.parentNode.setAttribute("class", "noHover");
    }, false);
}
}();

Answer 1

我不确定你要做什么，但是根据我的理解 - 事件监听器中函数中this.value的值将返回null - 理由是JavaScript中的作用域。 this.value的值的范围将在父函数中，而不是在事件列表匿名函数中定义的函数。

尝试阅读http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting您将了解范围以及您可能出错的原因或位置。

Answer 2

尝试这个：

(function() {
  var inputs = document.getElementsByClassName("inputNoFocus");

  function setEmptyVal() {
    if (this.value == this.defaultValue) this.value = "";
    this.parentNode.parentNode.setAttribute("class", "inputFocus");
  }

  function setDefaultVal() {
    if (this.value == "") this.value = this.defaultValue;
    this.parentNode.parentNode.setAttribute("class", "noHover");
  }

  for (i=0; i<inputs.length; i++) {
    var input = inputs[i];

    input.defaultValue = input.value;
    input.addEventListener("focus", setEmptyVal, false);
    input.addEventListener("blur", setDefaultVal, false);
  }
})();

这是小提琴 。