使用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()的幫助下將其轉換為float

如下： -

例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為“使它立即工作，而無需任何等待期”;

2. 當您的值為空或不正確的數字時，為該案例添加其他類型的錯誤。

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

 .alert { background-color: red; } .alert_hidden { display: none; } 

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