Question

模糊在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");
    }
});

Answer 1

使用jQuery，我会使用eventListeners执行类似的操作：

＆＃13;

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

＆＃13;

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

＆＃13;

虽然可能会有更优雅的解决方案，而不是查看className。

如何检测用户在输入框外部点击（光标消失）？

1 个答案: