Dynamic font resize

Question

This script resize text based on the text length. All works fine but the text does not resize up when deleting characters. what's missing? Hoping there is a script guru around to help me!

  $('#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" />

[KeyPress event is invoked only for character (printable) keys, KeyDown event is raised for all including nonprintable](https://stackoverflow.com/a/4843502/427146) — sabithpocker, Jun 08 '17 at 11:40
Possible duplicate of [JavaScript listener, "keypress" doesn't detect backspace?](https://stackoverflow.com/questions/4843472/javascript-listener-keypress-doesnt-detect-backspace) — sabithpocker, Jun 08 '17 at 11:40

score 0 · Answer 1 · answered Jun 08 '17 at 11:40

keypress will not fire on backspace, so change ot to keyup instaed

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

Dinesh undefined · Accepted Answer · 2017-06-08T16:30:37.703

0

is this you wanted to do?

Kepress works for printable characters only. In order to detect backspace and delete use keyup or keydown

$(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" />

edited Jun 08 '17 at 16:30

answered Jun 08 '17 at 11:41

Dinesh undefined

5,490
2
19
40

Wow! You made it look too easy! Exactly what I was after! Thanking you tons! – Jun 08 '17 at 11:48
Thanks again. What would i have to do to ignore spaces in the textLenght count? – Jun 08 '17 at 15:02
@Exposian done. updated my answer. now how many spaces you give it will not be considered. I'm replacing spaces with empty '' – Dinesh undefined Jun 08 '17 at 16:31

score -1 · Answer 3 · edited Jun 09 '17 at 01:24

-1

keypress will not fire on backspace, so change it to keyup instead

Remove the else condition and made use of only if

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

edited Jun 09 '17 at 01:24

Pang

9,564
146
81
122

answered Jun 08 '17 at 11:43

Sunusi Mohd Inuwa

72
2
9

Dynamic font resize

3 Answers3