動的フォントのサイズ変更

Question

このスクリプトは、テキストの長さに基づいてテキストのサイズを変更します。すべて正常に動作しますが、文字を削除するときにテキストのサイズが変更されません。何が欠けている？私を助けるために脚本家がいるのを願っています！

$('#location').keypress(function() { 
 

 
    var textLength = $(this).val().length; 
 

 
    if (textLength < 20) { 
 
     // Do noting 
 
    } else if (textLength < 40) { 
 
     $(this).css('font-size', '16px'); 
 
    } else if (textLength > 40) { 
 
     $(this).css('font-size', '24px'); 
 
    } 
 
    //console.log(textLength); 
 
    });

#location { 
 
    font-size: 24px; 
 
    outline: none; 
 
    width: 200px; 
 
    height: 30px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    border: 1px solid #ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="location" placeholder="Placeholder Text" />

Answer 1

をinstaedあなたがやってみたかったこのですか？

Kepressは、印刷可能な文字のみで動作します。それ以外を削除するバックスペースを検出し、削除

$(document).on('keyup keydown','#location',function() { 
 
    
 
    var textLength = $(this).val().replace(/\s+/g,'').length; // first replace spaces then count 
 
    console.log("Length without spaces "+textLength); 
 
    if (textLength < 20) { 
 
     $(this).css('font-size', '24px'); 
 
    } else if (textLength < 40) { 
 
     $(this).css('font-size', '16px'); 
 
    } else if (textLength > 40) { 
 
     $(this).css('font-size', '24px'); 
 
    } 
 
    //console.log(textLength); 
 
    });

#location { 
 

 
    outline: none; 
 
    width: 200px; 
 
    height: 30px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    border: 1px solid #ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="location" placeholder="Placeholder Text" />

Answer 2

keypressバックスペースに発砲、そうkeyupにOT変更されません

$('#location').keyup(function() { 

    var textLength = $(this).val().length; 

    if (textLength < 20) { 
     // Do noting 
    } else if (textLength < 40) { 
     $(this).css('font-size', '16px'); 
    } else if (textLength > 40) { 
     $(this).css('font-size', '24px'); 
    } 
    //console.log(textLength); 
    }); 

Answer 3

1. キー操作がバックスペースには発生しません使用keyupまたは​​を、その代わりにからkeyup

2. にそれを変更するためには、条件はの場合のみ

   $('#location').keyup(function() { 
   
       var textLength = $(this).val().length; 
   
       if (textLength < 40) { 
        $(this).css('font-size', '16px'); 
       } 
       if (textLength > 40) { 
        $(this).css('font-size', '24px'); 
       } 
       //console.log(textLength); 
   });