jqueryを使用して入力しないと、テキストボックスの赤い枠が表示される

Question

テキストボックスを作成したい場合は、ユーザーが入力していない場合は、テキストボックスの境界線が赤くなります。

if ($('#TextBoxID').val() == '') { 
    $('#TextBoxID').css('border-color', 'red'); 
} 
else { 
    $('#TextBoxID').css('border-color', ''); 
} 

私はこのコードで成功しました。しかし、ページが最初に読み込まれたときだけ赤に変わります。私が欲しいのは、ユーザーが何かをタイプした直後に、赤い枠線が普通になります。誰でも動的にそれを行う方法を教えることができますか？

Answer 1

あなたはinputイベントをサブスクライブする必要があり、ハンドラで

$('#TextBoxID').on('input', function() { 
 

 
    const input = $(this); 
 

 
    if(input.val()) { 
 
    input.css('border-color', ''); 
 
    } else { 
 
    input.css('border-color', 'red'); 
 
    } 
 
});

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

Answer 2

この関数を呼び出す誰もが動的にそれを行う方法を伝えることができますか？

だけユーザーがキーボード経由で値を入力したときユーザーが一人でマウスを経由して詳細情報を入力する際inputが解雇されながらイベントは、解雇されるイベント

$('#TextBoxID').on("keyup input", function(){ 
    var $this = $(this); 
    if ($this.val() == '') { 
     $this.css('border-color', 'red'); 
    } 
    else { 
     $this.css('border-color', ''); 
    } 
}); 

keyupkeyup/inputに同じことを行います。

Answer 3

これを2回ロードする必要があります。入力フィールド上のonkeypressでは第2回準備文書にまず &

$(function() { 
    if ($('#TextBoxID').val() == '') { 
     $('#TextBoxID').css('border-color', 'red'); 
    } else { 
     $('#TextBoxID').css('border-color', '#ddd'); 
    } 

    $('#TextBoxID').onkeypress(function() { 
     if ($(this).val() == '') { 
      $(this).css('border-color', 'red'); 
     } else { 
      $(this).css('border-color', '#ddd'); 
     } 
    }); 
}); 

Answer 4

あなたは、ページのロード時に、ロジックを処理するために単一の関数を作成しますinput textbox

var $textBox = $('#TextBoxID'); 
$textBox.on('keypress input',function(){ 
if ($textBox.val().length > 0) { 
     $textBox.css('border-color', ''); 
} 
else{ 
     $textBox.css('border-color', 'red'); 
} 
}); 

Answer 5

にjqueryのkeypress , inputイベントを使用することができ、それを呼び出すと、のキーアップイベント

$(document).ready(() => { 
 
    let myTarget = '#TextBoxID' 
 
    const changeBorder =() => { 
 
    if ($(myTarget).val() == '') { 
 
     $(myTarget).css('border-color', 'red'); 
 
    } else { 
 
     $(myTarget).css('border-color', ''); 
 
    } 
 
    } 
 
    // First run when page load. 
 
    changeBorder() 
 
    // Suscribe event 
 
    $(myTarget).on('keyup', changeBorder) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="TextBoxID" name="myTextBox">