文本框中的红色边框如果未使用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

创建一个单个函数来处理逻辑，然后在页面加载上，拨打它，然后判处 keyup event

$(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">

Answer 3

任何人都可以动态地告诉它如何做？

在keyup/input事件上只做同样的事情

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

keyup当用户通过键盘输入值时，将触发事件，而当用户单独通过鼠标输入详细信息时，input将被触发。。。

Answer 4

您必须加载此剪刀2次。首先是文档准备就绪＆amp;在输入场上的Onkeypress上第二

$(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 5

您可以在input textbox

上使用jQuery keypress , input事件

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