値が空の場合、入力のデフォルト値を設定する方法は？ jQuery

Question

例では、デフォルト値が5のところに入力があります。 しかし、ユーザーはバックスペースを使用してそれを削除します。そのあとで再びデフォルト値を設定します。

Answer 1

ご入力は、あなたが最初に設定した場合、デフォルト値を取得するために

$('#test').on('change blur',function(){ 
 
     if($(this).val().trim().length === 0){ 
 
     $(this).val(5); 
 
     } 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="test" type="text" value = "5" />

Answer 2

以下の利用defaultValueのように行うことができますID testを持っているとしましょう：

$(':text').on('blur', function(e){ 
 
    this.value = this.value.trim() || this.defaultValue; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='text' value='5'>

Answer 3

keyupの代わりにblurを使用する方が良いでしょう。理由は次のとおりです。

ユーザーが数字（1桁のみ）を入力したいが、5でない場合は、（3）としましょう。ユーザーがデフォルトの番号（この場合は（5））をバックスペースし、1桁の数字を入力したい場合、ユーザーは決してできません。

$('#test').on('blur',function(){ 
    if($(this).val().trim().length == 0){ 
    $(this).val(5); 
    } 
}) 

注：また値が整数であるかどうかを確認するためkeyup機能を使用する必要があり、!isNaN

Answer 4

それはデフォルト値を削除するからユーザーを妨げるように私は、keyupを使用していないお勧めしたいと新しい値で更新します（keyupがバックスペースキーによってトリガーされた後に値がないため）。

代わりに私が（関連する要素がselector変数に保持されていると仮定して）与えることを、changeとblurを使用することをお勧めしたい：

$(selector).on('change blur', function() { 
    // sets the value of the element based on the current-value; 
    // if the value is equal to an empty string ('') once the 
    // leading and trailing white-space is removed (using 
    // String.prototype.trim()) then we set the value to the 
    // defaultValue (the value held by the <input> on page-load) 
    // otherwise we set it to the current-value: 
    this.value = this.value.trim() === '' ? this.defaultValue : this.value; 
}); 

あなたは再びプレーンのJavaScript –で同じ機能を実装したい場合あなたは以下のように使用することができ、関連する要素がselector変数–に保持されていると仮定すると：

function defaultIfEmpty(){ 
    let el = this; 
    el.value = el.value.trim() === '' ? el.defaultValue : el.value; 
} 
selector.addEventListener('change', defaultIfEmpty); 

Answer 5

より一般的なソリューション：それは空になっています一度

HTML

<input type='text/numeric/etc' data-default='defaultValue' value='defaultValue' /> 

はJavaScript

$('input[data-default], textarea[data-default]').on('change blur',function(){ 
    if($(this).val().length == 0) { 
     $(this).val($(this).attr("data-default")); 
    } 
} 

data-default属性が設定された任意の入力またはテキストエリアはデフォルトにフォールバックします。

Answer 6

<input class="test" type="text" value = "5" /> 

JS

//get default value 
val = $('.test').val(); 

$('.test').on('change blur', function() { 
    //check if change 
    if ($(this).val().trim().length === 0) { 
    $(this).val(val); 
    } 
})