Сохранение входного значения, так что если пользователь оставляет пустым, он возвращается к значению по умолчанию

Question

Я попытался создать переменную oldValue, а затем, если текущее значение === "", оно вернется обратно к oldValue, и, поскольку я использую цикл for, я могу явно сказать, что это значение .

Код изменяет div вокруг элемента input, поэтому существует .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

Попробуйте:

(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);
  }
})();

Вот скрипка .

Answer 2

Я не уверен, что вы пытаетесь сделать, но из моего понимания - значение this.value в ваших функциях в прослушивателях событий будет возвращать null - причина в том, что область видимости в JavaScript. область значения this.value будет находиться в родительской функции, а не в функции, определенной в анонимной функции списков событий.

Попробуйте прочитать http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting, вы поймете, что такое определение объема и почему или где вы можете ошибаться.