javascript - 如何检测用户何时在输入框外单击(光标消失)？

模糊可以在Safari上完成工作，但是在Firefox上会引起问题。似乎是在将鼠标移到输入框之外时，而不是在实际删除光标时（例如，用户单击框外的某个位置时），Firefox上的模糊才会触发。这对我来说是个问题，因为我不希望仅因为用户的光标移到框外而触发代码...我只希望在用户单击框外以表示完成操作时才触发代码打字。我什至尝试过事件聚焦，但同样的问题也会发生。这是我的代码：

<div class="form-group">
    <label for="min-reward-amount-input">Minimum reward amount</label>
    <div class="input-group">
        <span class="input-group-addon">$</span>
        <input type="number" step="0.1" min="0" class="form-control" id="min-reward-amount-input" placeholder="0.00">
    </div>
</div>


$("#min-reward-amount-input").blur(function(){
    var initialValue = parseFloat($("#min-reward-amount-input").val());
    if(!isNaN(initialValue) && initialValue>=0) {
        var processedValue = initialValue.toFixed(2);
        $("#min-reward-amount-input").val(processedValue);

    } else {
        $("#min-reward-amount-input").val("0.00");
    }
});

最佳答案

使用jQuery，我可以使用eventListeners做类似的事情：

document.addEventListener("click", function (event) {
    if (event.target.className !== "textBox") {
        window.alert("Clicked outside input field");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST">
<input type="text" name="textBox_1" class="textBox" placeholder="Field 1" />
<input type="text" name="textBox_2" class="textBox" placeholder="Field 2" />
<input type="text" name="textBox_3" class="textBox" placeholder="Field 3" />

<input type="submit" name="submit" class="submit" value="Next" />
</form>

尽管有可能，并且可能是更优雅的解决方案，而不是查看className。