javascript - ユーザーが入力を開始したときに、強調表示された入力フィールドを「非強調表示」にします

Question

「参加」ボタンをクリックしてフィールドを空白のままにすると、赤いフィールドが強調表示されるJavaScriptで簡単なフォームを作成しました。

記入後も「参加」ボタンを押すまでは赤のままです。したがって、クリックする代わりに、ユーザーが入力を開始したらハイライトをオフにしたいだけです。

JSFiddle: http://jsfiddle.net/LCBradley3k/xqcJS/6/ Javascript:

$(document).ready(function(){


      /*  setTimeout(function(){ 
        $('.inputs').show("slide", { direction: "down" }, 1000);
        }, 2000);
    });*/

    $('#join').click(function(){

        var correct = true;

        $('input[type="text"]').each(function(indx){
            var $currentField = $(this);
            if ($currentField.val() === ''){
                $currentField.addClass('empty');
                correct = false;
            } else{
                $currentField.removeClass('empty');
            }

        });
        if (correct) {
            $('#answer').html('Thank You!');
            setTimeout(function(){
        $('.inputs').hide("slide", { direction: "up" }, 1000);
        }, 2000);
        } else {
        $('#answer').html('Please fill highlighted fields.') ;     
        }



    });

Answer 1

次のコードを追加します。

$('input[type="text"]').focus(function() {            
   $(this).removeClass('empty');
});

フィールドにフォーカスすると、クラス「空」が削除されます。

Answer 2

フォーカスを使用するか、キーアップを使用できます。

$('input[type="text"]').keyup(function(e){
  $(this).removeClass('empty');
})

入力するたびにイベントがトリガーされないため、フォーカスを使用する場合は、キーアップをフォーカスに置き換えることができます。

Answer 3

keyupフォーム入力にハンドラーを追加して、クラスを削除します。

$('input[type="text"]').keyup(function (event) {
    var $currentField = $(this);
    if ($currentField.val() !== '') {
        $currentField.removeClass('empty');
    }
});

デモ

Answer 4

もちろん、キーダウンにバインドするだけです。

http://jsfiddle.net/xqcJS/7/

if ($currentField.val() === ''){
    $currentField.addClass('empty');
    correct = false;
    $currentField.one('keydown',function(){
        $currentField.removeClass('empty');
    });

Answer 5

$('input[type="text"]').keydown(function() {
    if ( $(this).val != "" )
        $(this).removeClass('empty');
});