JQueryの入力メッセージ

Question

私は入力があるフォームを持っています。最初の入力は、2番目の入力の前に入力する必要があります。

ユーザーが入力2を最初にクリックすると、最初に他の入力を入力するメッセージが表示されます。今私は、メッセージがポップアップした後、ユーザーが入力したものを一杯にするとメッセージが消えるようにしたいと思います。

My codepen。

私はonchange関数を追加しようとしましたが、うまくいかないようです。あなたが代わりに変更のあなたのイベントとして使用することができますからkeyup

$('body').on('focus', '.clickable', function() { 
 
    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('') 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>

Answer 1

。変更は、入力から離れてクリックするのを待つ必要があります（ぼかし）。あなたが入力を離れるときに呼び出さ変更に

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

Answer 2

は、あなたのコードは、入力

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

Answer 3

を残しwhitout変更を確認するからkeyupによって入力を出るとき、また、あなたが「変化」に変更することができます動作します

$('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('') 
    } 
}); 

Answer 4

私はあなたのアプローチを変更するわけではないテキストフィールドへの即時の変更を検出するために、（...「からkeyupペーストを変える」） を.on使用していますが無効に試みることができますフィールドをクリックして入力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> 

JS：

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

：

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; 
    } 
} 

Answer 5

あなたのようinputイベントを使用して、ユーザー入力を追跡する場合、私はより効率的になりますお役に立てれば。

$('body').on('focus', '.clickable', function() { 
 
    if (!$('.look').val().length) { 
 
    $(this).siblings('p').text('Please fill the first input.') 
 
    } 
 
}); 
 
$('body').on('input', '.look', function() { 
 
    if ($('.look').val().length) { 
 
    $(this).siblings('p').text('') 
 
    } 
 
});

.warning { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

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