Question

我有一个禁用元素，只有在输入值输入之前才启用它，问题是change在输入失去焦点之前触发并且焦点移动到下一个未禁用的元素，因此删除然后disabled属性不好。

HTML：

Fill this before you continue:      <input id="a" />
Fill this after the previous input: <input id="b" disabled="disabled" />

jQuery的：

$('#a').change(function(){
    if (this.value === "")
        $('#b').attr('disabled', 'disabled');
    else
        $('#b').removeAttr('disabled');
});

Fiddle

我可以通过从disabled更改为readonly来解决此问题，但之后它是只读的而不是我喜欢的禁用，是否有良好且强大（鼠标证明）如何实现它并使用readonly？

需要考虑的事项：

订阅多个活动似乎并不合适。
用户可以在不使用键盘的情况下将文本粘贴到第一个输入。

Answer 1

您已在问题中说过您不想订阅多个活动，但这是我能想到的唯一方法。问题是不同的方式直接使用C / C ++ DOM更改输入所有接口的值，但它们不通过JS API来实现。有关详情，请参阅this question。

在订阅多个活动时采用合理的防弹方式是：

$('#a').on('keyup paste propertychange input', function() {
    if (this.value === "") $('#b').prop('disabled', true);
    else $('#b').removeAttr('disabled');
});

以下是演示：http://jsfiddle.net/HmzYR/

Answer 2

您是否考虑在onkeydown或onkeyup上添加活动？

如果用户只需要输入某些内容，您可以在onkeyup上添加一个执行验证的事件，并设置另一个输入元素的disabled属性。

我不确定事件的顺序，但是我会假设焦点移动后onkeyup也会触发。但在这种情况下，这应该不是很大的问题。我能想到的一个案例是以下键序列："a" backspace tab。我想完美的解决方案是使用onkeydown并在按下之前检查密钥，但很难预测不可读密钥的影响，如backspace和{{ 1}}。

另一个建议：附加arrowdown侦听器并查找onkeydown密钥。验证该值并启用下一个输入字段。

实质上：您需要捕获所有输入事件或所有更改焦点的事件（如tab）。并且您必须在事件完成之前行动。

Answer 3

使用prop而非attr：

$('#b').prop('disabled', true);

同时尝试连接keyup事件而不是change事件。

这是一个小提琴：http://jsfiddle.net/maniator/swubm/3/

有关详细说明，请参阅此处：.prop() vs .attr()

使用mouseout来处理剪切和粘贴：http://jsfiddle.net/maniator/swubm/4/（基于以下评论）

Answer 4

我更新了我的回答：http://jsfiddle.net/swubm/10/

Fill this before you continue:
<input id="a" />
<br>
<br>
Fill this after the previous input
<input id="b" disabled />

JS：

$('#a').bind('input propertychange', function() {
    var value = $('#a').val();
    if (value == "")
        $('#b').attr('disabled', 'disabled');
    else
        $('#b').removeAttr('disabled');

});

移动到已禁用并在onchange上启用的下一个输入

4 个答案: