Question

我发现了一个有趣的跨浏览器问题，使用jQuery＆＃39; .val来清除HTML时间输入。我想动态禁用输入并清除表单中的值。看起来Firefox需要以特定的顺序发生才能达到预期的效果，Chrome和Safari似乎并不关心这个订单。我有同样的code in a jsfiddle。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

在Firefox中，只有time输入disabled后才会显示value属性只能更改为有效的time值，例如{{1} }，或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');
});

使用纯JavaScript时会发生同样的结果。在将值设置为<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>之前禁用输入在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";
});

所以，回答你的问题，这个问题并不仅限于jQuery ，因为普通的JavaScript会出现同样的结果。但是仍然不知道如何清除禁用的时间输入。

我已经提交了bug for this issue。

在Firefox中重置<input type =“time”/>的值

1 个答案: