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

Question

我发现一个有趣的跨浏览器问题，使用 jQuery 的 .val 清除 HTML 时间输入。我想动态禁用输入并清除表单中的值。似乎 Firefox 需要以特定顺序发生才能达到预期的结果，Chrome 和 Safari 似乎并不关心这个顺序。我也有同样的code in a 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 上。但是仍然不知道如何清除禁用的时间输入。

我已经提交了bug for this issue。