移动到下一个被禁用和启用 onchange 的输入

Question

我有一个禁用的元素，只有在将值输入到它的前一个输入后才启用它，问题是change 在输入失去焦点之前触发并且焦点移动到下一个未禁用的元素，所以删除@ 987654324@属性那就不行了。

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 上添加活动？

如果用户只需要输入 something，您可以在 onkeyup 上添加一个事件，该事件会进行验证并设置其他输入元素的 disabled 属性。

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

---

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

---

本质上：您要么需要捕捉所有输入事件，要么需要捕捉所有改变焦点的事件（如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/（基于下面的cmets）

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');

});