如何控制用户输入的顺序

Question

我有这个表单，有几个输入。我想让输入1在输入2之前被设置。我想让输入2成为只读的，直到输入1被输入。

​

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

​

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

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

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

​