使用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.You可以使用input或keyup方法。

2.Also .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爲「使其立即開展工作沒有任何等待期「;

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>