Question

我在努力完成某项任务。当我专注于输入时，应清除其他输入的值。不幸的是我在循环中的逻辑失败。为什么呢？

*****编辑**（Rocket Hazmat小费）

function emptyInputArea(e) {

    if(e.target.tagName === 'INPUT') {

        currentElem = e.srcElement;

        for(var i = 0, total = inputs.length; i < total; i += 1) {
            if(currentElem.getAttribute('id') === inputs[i].getAttribute('id')) {
                currentIdx = i;
                console.log('current index: ' + currentIdx);
            }
            //while(i !== currentIdx) {
                //console.log('show inputs for clear: ' + i);
                //inputs[i].value = "";
            //}
            if(i !== currentIdx) {
                console.log('show inputs for clear: ' + i);
                inputs[i].value = "";
            }
        }
    }
}

完整代码here

Answer 1

我认为，这段代码符合您的要求。

function emptyInputArea(e) {
  if(e.target.tagName === 'INPUT') {
    //Process all inputs.
    for(var i = 0; i < inputs.length; ++i) {
      //Skip the current input.
      if(inputs[i].getAttribute('id') !== e.srcElement.getAttribute('id')) {
        //Empty all others.
        console.log('show inputs for clear: ' + i);
        inputs[i].value = "";
      }
    }
  }
}

Answer 2

using a PlaceHolder 而不是你正在做什么？

<div class="inputs">
    <input id="city" type="text" placeholder="some city" />
    <input id="postal-code" type="text" placeholder="some code" />
    <input id="street" type="text" placeholder="some street" />
    <input id="other-details" type="text" placeholder="othe details" />
</div>

或者，如果您想使用Javascript，请尝试 use a "data-" attribute ：

HTML code：

<div class="inputs">
    <input id="city" type="text" data-defaultvalue="some city" />
    <input id="postal-code" type="text" data-defaultvalue="some code" />
    <input id="street" type="text" data-defaultvalue="some street" />
    <input id="other-details" type="text" data-defaultvalue="othe details" />
</div>

jQuery代码：

$("input").on("focus", function() {
    if ($(this).val() == $(this).data("defaultvalue")) {
        $(this).val("");
    }
}).on("blur", function() {
    if ($(this).val() == "") {
        $(this).val($(this).data("defaultvalue"));
    }
}).each(function() {
   $(this).val($(this).data("defaultvalue")); 
});

Pure Javascript 代码：

var myInputs = document.getElementsByTagName("input");

for (var i = 0; i < myInputs.length; i++) {
    var myInput = myInputs[i];
    myInput.onfocus = function() {
        if (this.value == this.getAttribute("data-defaultvalue")) {
            this.value = "";
        }
    };

    myInput.onblur = function() {
        if (this.value == "") {
            this.value = this.getAttribute("data-defaultvalue");
        }
    };

   myInput.value = myInput.getAttribute("data-defaultvalue");
}

js循环并选择除点击之外的其他输入

2 个答案: