在 Firefox 中重置 <input type="time"> 的值

Question

我发现一个有趣的跨浏览器问题，使用 jQuery 的

.val

来清除 HTML 时间输入。我想动态禁用输入并清除表单中的值。看来 Firefox 需要以特定的顺序发生才能达到预期的结果，Chrome 和 Safari 似乎并不关心这个顺序。我在 jsfiddle 中有相同的代码。

我很好奇是否有人知道幕后发生了什么导致这个问题。这是 jQuery 中的错误吗？

$('#reset-jq').click(function() {
    $('#time-jq').val('').prop('disabled', true);
});

$('#reset-jqn').click(function() {
    $('#time-jqn').prop('disabled', true).val('');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><strong><code>.val</code> before disable:</strong> works on desktops: Chrome, Safari and Firefox</p>
<input id="time-jq" type="time" value="11:11">
<button id="reset-jq">Clear</button>
<br><br>
<p><strong>disable before <code>.val</code>: </strong> works on desktops: Chrome, Safari, but not Firefox</p>
<input id="time-jqn" type="time" value="11:11">
<button id="reset-jqn">Clear</button>

Answer 1

在 Firefox 中，一旦

time

输入变为

disabled

，它就会出现，

value

属性只能更改为有效的

time

值 - 例如

00:00

或

13:30

。例如，使用：

$(#INPUT_ID).prop('disabled', true).val('00:00');

会将输入设置为

disabled

，并将输入更改为显示

12:00 AM

（而不是默认的

--:-- --

）。

$('#reset-jqn-noval').click(function() {
    $('#time-jqn-noval').prop('disabled', true).val('');
});

$('#reset-jqn').click(function() {
    $('#time-jqn').prop('disabled', true).val('00:00');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><strong>disable before <code>.val</code> with val("")</strong> </p>
<input id="time-jqn-noval" type="time" value="11:11">
<button id="reset-jqn-noval">Clear</button>
<br/><br/>
<p><strong>disable before <code>.val</code> with val("00:00") </strong></p>
<input id="time-jqn" type="time" value="11:11">
<button id="reset-jqn">Clear</button>

事实证明，使用纯 JavaScript 时会发生相同的结果。在将值设置为

""

之前禁用输入在 Firefox 中没有任何效果。但在将值设置为有效时间之前禁用输入确实有效。

document.getElementById("INPUT_ID").disabled = true;
document.getElementById("INPUT_ID").value = "";

document.getElementById('reset-jqn-noval').addEventListener('click', function() {
    document.getElementById("time-jqn-noval").value = "";
    document.getElementById("time-jqn-noval").disabled = true;  
});

document.getElementById('reset-jqn').addEventListener('click', function() {
    document.getElementById("time-jqn").disabled = true;
    document.getElementById("time-jqn").value = "";
});

document.getElementById('reset-jqn-value').addEventListener('click', function() {
    document.getElementById("time-jqn-value").disabled = true;
    document.getElementById("time-jqn-value").value = "00:00";
});

<p><strong>disable after <code>.val</code> with val("")</strong></p>
<input id="time-jqn-noval" type="time" value="11:11">
<button id="reset-jqn-noval">Clear</button>
<br/><br/>
<p><strong>disable before <code>.val</code> with val("")</strong></p>
<input id="time-jqn" type="time" value="11:11">
<button id="reset-jqn">Clear</button>
<br/><br/>
<p><strong>disable before <code>.val</code> with val("00:00") </strong></p>
<input id="time-jqn-value" type="time" value="11:11">
<button id="reset-jqn-value">Clear</button>

所以，为了回答你的问题，这个问题不仅限于jQuery，因为纯JavaScript也会出现相同的结果。但目前还不知道如何清除禁用的时间输入。

我已针对此问题提交了错误。

Answer 2

这可以通过使用 JQuery 3.x 将值设置为 null 来实现。

$(input).val(null)

已在 Firefox 上测试