Javascript JQuery输入消息

我有一个带有输入的表单。第一个输入需要在第二个输入之前填写

如果用户首先单击输入2，他们会收到一条消息，说要先填充其他输入。现在我想这样做，在消息弹出后，如果用户填写了输入，消息就会消失

我尝试添加一个onchange函数，但似乎不起作用

$（'body'）。在（'focus'，'clickable'，function（）上{
if（！$（'.look'）.val（）.length）{
$（this）.this（'p'）.text（'请先选择类型'）
}
});
$（'body'）。on（'change'，'look'，function（）{
if（$（'.look'）.val（）.length）{
$（this）.同级（'p'）。文本（“”）
}
});

输入-1:


投入-2：



您可以使用keyup作为事件，而不是更改。更改需要等待您单击远离输入（模糊）

当您离开输入时调用on change，您的代码在离开输入时工作，您也可以通过keyup更改“on change”，查看不离开输入的更改

codepen : https://codepen.io/anon/pen/QOzKwQ

使用.on（“更改键控粘贴”…）
检测对文本字段的即时更改

$( 'body').on('focus','.clickable',function() {
    $('.look').on("change keyup paste", function(){
        $(this).siblings('p').text('')
    });

    if (!$('.look').val().length) {
        $(this).siblings('p').text('Please select Type first')
    }
});
$( 'body').on('change','.look',function() {
    if ($('.look').val().length) {
        $(this).siblings('p').text('')
    }
});

我不想改变你的方法，但你可以尝试禁用该字段，这样他们就不能单击它，然后在输入1填充后启用它

HTML:

<form>
    <div>
        Input-1:<br>
        <input type="text" name="first" id="one" class="look"><br>
        Input-2:<br>
        <input class="clickable" type="text" name="second" id="two" >
        <p class="warning"></p>
    </div>
</form>

document.getElementById("two").disabled = true;

var dis1 = document.getElementById("one");
dis1.onchange = function () {
    if (this.value != "" || this.value.length > 0) {
        document.getElementById("two").disabled = false;
    }
}

如果您使用
input
事件跟踪用户输入，则效率会更高，如：

$('body').on('input', '.look', function() {
  if ($('.look').val().length) {
    $(this).siblings('p').text('')
  }
});

片段：


$（'body'）。在（'focus'，'clickable'，function（）上{
if（！$（'.look'）.val（）.length）{
$（this）.this（'p'）.text（'请填写第一个输入'）
}
});
$（'body'）。on（'input'，'look'，function（）{
if（$（'.look'）.val（）.length）{
$（this）.同级（'p'）。文本（“”）
}
});
。警告{
颜色：红色；
}

输入-1:


投入-2：




$('body').on('input', '.look', function() {
  if ($('.look').val().length) {
    $(this).siblings('p').text('')
  }
});