javascript - 调整字体大小以固定到div中

Question

我正在尝试将文本固定到 div 中，如果文本增加它会工作，但是当用户按下退格键时，它应该恢复到原来的大小并适合 div

$(".engravingText").keyup(function() {
  $('#overlay_image_text').html($('.engravingText').val());
  var el = document.querySelector('#overlay_image_text');
  var orgFontSize = getStyle(el, 'font-size');



  var tst = document.createElement('span');
  tst.textContent = el.textContent;
  tst.style = 'position:absolute;left:-9999px;display:inline-block;';
  document.body.appendChild(tst);

  tst.style.fontSize = orgFontSize;
  tst.style.fontWeight = getStyle(el, 'font-weight');
  tst.style.fontFamily = getStyle(el, 'font-family').split(',')[0];
  var i = parseInt(tst.style.fontSize);

  for (; i > 0; i--) {
    if (parseInt(getStyle(tst, 'width')) < 200) {

      el.style.fontSize = i + 'px';
      break;
    }
    tst.style.fontSize = i + 'px';

  }
  document.body.removeChild(tst);
});

function getStyle(elem, prop) {
  return window.getComputedStyle(elem, null).getPropertyValue(prop);
}

#overlay_image_text {
  position: absolute;
  margin-top: 50px !important;
  margin-left: 35px !important;
  text-align: center;
  width: 200px;
  font-size: 40px;
  color: #aeaeae;
  border: 1px solid red;
  height: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="overlay_image_text">HHHHH</div>
<br />
<input type="text" maxlength="20" style="font-family: Cherokee; background-color: transparent; font-size: 16px; text-align: center;" class="form-control engravingText" placeholder="Please type engraving text here" value="">

Answer 1

这是您修复的代码段。根据我的评论 orgFontSize 不应该在 keyup 处理程序中。它会在每次按键时重置，字体大小一旦缩小就无法增大。

var el = document.querySelector('#overlay_image_text');
var orgFontSize = getStyle(el, 'font-size');

$(".engravingText").keyup(function() {
  $('#overlay_image_text').html($('.engravingText').val());

  var tst = document.createElement('span');
  tst.textContent = el.textContent;
  tst.style = 'position:absolute;left:-9999px;display:inline-block;';
  document.body.appendChild(tst);

  tst.style.fontSize = orgFontSize;
  tst.style.fontWeight = getStyle(el, 'font-weight');
  tst.style.fontFamily = getStyle(el, 'font-family').split(',')[0];
  var i = parseInt(tst.style.fontSize);

  for (; i > 0; i--) {
    if (parseInt(getStyle(tst, 'width')) < 200) {

      el.style.fontSize = i + 'px';
      break;
    }
    tst.style.fontSize = i + 'px';

  }
  document.body.removeChild(tst);
});

function getStyle(elem, prop) {
  return window.getComputedStyle(elem, null).getPropertyValue(prop);
}

#overlay_image_text {
  position: absolute;
  margin-top: 50px !important;
  margin-left: 35px !important;
  text-align: center;
  width: 200px;
  font-size: 40px;
  color: #aeaeae;
  border: 1px solid red;
  height: 40px;
  line-height: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="overlay_image_text">HHHHH</div>
<br />
<input type="text" maxlength="20" style="font-family: Cherokee; background-color: transparent; font-size: 16px; text-align: center;" class="form-control engravingText" placeholder="Please type engraving text here" value="">