使用jQuery动态更改输入值

Question

我正在尝试更改输入值并根据用户编写的值显示警报。现在它不起作用，除非它失去焦点。我可以在没有任何等待期的情况下立即使用吗？

jQuery('input').on('change', function () {
    var myInput = jQuery(this);
    if (myInput.val() < 0.2 ) {
        myInput.val('0.2');
        jQuery('.alert').css('display', 'block')
    }
    else {
        jQuery('.alert').css('display', 'none')
    }
});

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

<input value="">
<p class="alert" style="display: none">minimum value is 0.2</p>

Answer 1

1.您可以使用input或keyup方法。

2.同时.val()将为您提供一个字符串值，因此将其与0.2进行比较，在parseFloat()

的帮助下将其转换为浮点值

如下： -

示例1： -

jQuery('input').on('input', function () {
    var myInput = jQuery(this);
    if (parseFloat(myInput.val()) < 0.2 ) {
        jQuery('.alert').css('display', 'block')
    }
    else {
        jQuery('.alert').css('display', 'none')
    }
});

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

<input value="">
<p class="alert" style="display: none">minimum value is 0.2</p>

示例2： -

jQuery('input').on('keyup', function () {
    var myInput = jQuery(this);
    if (parseFloat(myInput.val()) < 0.2 ) {
        jQuery('.alert').css('display', 'block')
    }
    else {
        jQuery('.alert').css('display', 'none')
    }
});

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

<input value="">
<p class="alert" style="display: none">minimum value is 0.2</p>

Answer 2

在这种情况下我要做的是：

1. input事件代替change至＆＃34;使其无需任何等待期即可立即使用＆＃34;;

2. 当您的值为空或不正确的数字时，为该案例添加其他类型的错误。

＆＃13;
＆＃13;
const $errors = $('.alert');

$('input').on('input', function(e) {
    const $input = $(e.target);
    const value = Number($input.val());
    let errorType = '';
    
    if (!value) {
      errorType = 'required';
    } else if (value < 0.2) {
      errorType = 'min';
      $input.val(0.2);
    }
    
    $errors.addClass('alert_hidden');
    $errors.filter(`[data-type="${errorType}"]`).removeClass('alert_hidden');
});
＆＃13;
.alert {
  background-color: red;
}

  .alert_hidden {
    display: none;
  }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input value="">
<p class="alert alert_hidden" data-type="min">minimum value is 0.2</p>
<p class="alert alert_hidden" data-type="required">value is required</p>
＆＃13;
＆＃13;
＆＃13;