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

keypress不会触发退格键，因此请将{ot}改为keyup安装

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

这是你想做的吗？

Kepress仅适用于可打印字符。要检测退格和删除，请使用keyup或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" />

Answer 3

按键不会触发退格键，因此请将其更改为键盘

删除其他条件并仅使用 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);
});

动态字体调整大小

3 个答案: