如何控制用户输入输入的顺序

Question

我有几个输入的这个表格。我想这样做，以便输入1必须在输入2之前设置.Id喜欢输入两个readonly直到输入一个输入。

<form>
  Input-1:<br>
  <input type="text" name="first" id="one"><br>
  Input-2:<br>
  <input type="text" name="second" id="two" readonly>
</form>

我不知道如何才能做到这一点。 Jquery的？

Answer 1

你不需要jQuery。在vanilla JS中实现它的一种方法是：（红色表示readonly，绿色表示OK）

＆＃13;

＆＃13;

document.querySelector('#one').onchange = (ev) => {
  if(ev.target.value !== '') {
    document.querySelector('#two').readOnly = false;
  } else {
    document.querySelector('#two').readOnly = true;
  }
};

＆＃13;

#two[readonly] {
  background-color: rgba(255, 69, 0, 0.5);
}
#two {
  background-color: rgba(76, 187, 23, 0.5);
}

＆＃13;

<input type="text" id="one"><br>  
<input type="text" id="two" readonly>

＆＃13;

＆＃13;

＆＃13;