如何根据文本长度更改输入类型文本中的文本大小？ [复制]答案

【问题标题】：How can I change the text size in a input type text based on the length of the text? [duplicate]如何根据文本长度更改输入类型文本中的文本大小？ [复制]
【发布时间】：2015-12-12 01:18:54
【问题描述】：

我有一个输入类型的文本，例如：

<label class="NoAfter" for="ProjectTitle">
    Project Title: 
    <input id="ProjectTitle" type="text" style="width:250px;" name="ProjectTitle" value="" required>
</label>

我想在用户输入时调整字体大小。我无法使用 jQuery 插件，所以我想要一个 javascript 解决方案或没有插件的 jQuery 解决方案。

【问题讨论】：

不使用 jQuery 插件是一个奇怪的要求。有很多这样做的。如果您无法将插件添加到页面，为什么不找到 MIT 许可的插件并从中复制逻辑？

标签： javascript jquery

【解决方案1】：

Source，但确实从keyup变为keydown，这样，如果你点击并按住一个字符，它仍然会自动调整大小

您需要分离出字体大小声明并适当地缩放它。根据您的工作方式，如果您分解字体声明的不同部分，这可能是最简单的。调整大小函数可能看起来像这样（同样，很明显，这是依赖于 jQuery 的）：

JSFiddle

// txt is the text to measure, font is the full CSS font declaration,
// e.g. "bold 12px Verdana"
function measureText(txt, font) {
  var id = 'text-width-tester',
    $tag = $('#' + id);
  if (!$tag.length) {
    $tag = $('<span id="' + id + '" style="display:none;font:' + font + ';">' + txt + '</span>');
    $('body').append($tag);
  } else {
    $tag.css({
      font: font
    }).html(txt);
  }
  return {
    width: $tag.width(),
    height: $tag.height()
  }
}

function shrinkToFill(input, fontSize, fontWeight, fontFamily) {
  var $input = $(input),
    txt = $input.val(),
    maxWidth = $input.width() + 5, // add some padding
    font = fontWeight + " " + fontSize + "px " + fontFamily;
  // see how big the text is at the default size
  var textWidth = measureText(txt, font).width;
  if (textWidth > maxWidth) {
    // if it's too big, calculate a new font size
    // the extra .9 here makes up for some over-measures
    fontSize = fontSize * maxWidth / textWidth * .9;
    font = fontWeight + " " + fontSize + "px " + fontFamily;
    // and set the style on the input
    $input.css({
      font: font
    });
  } else {
    // in case the font size has been set small and 
    // the text was then deleted
    $input.css({
      font: font
    });
  }
}

$(function() {
  $('#my_input').keydown(function() {
    shrinkToFill(this, 20, "", "Georgia, serif");
  })
});

input {
  font: 20px Georgia, serif;
  width: 150px;
  height: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input id="my_input">

【讨论】：

哇，代码太多了！！！！！

【解决方案2】：

您好，如果您不想使用任何 jquery 插件，那么最简单的答案就在这里：

<label class="NoAfter" for="ProjectTitle">
    Project Title: 
    <input id="ProjectTitle" type="text" style="width:250px;" name="ProjectTitle" value=""  onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"  required >
</label>

享受！！！！！！！！！！！！祝你有美好的一天

【讨论】：

这是改变输入的大小而不是文本的大小，但我喜欢它！（如果有什么安慰的话）可以改变字体大小吗？

【解决方案3】：

您可以为输入添加一个按键事件并修改输入的字体大小。

document.getElementById("ProjectTitle").onkeyup = function() {
    var value = document.getElementById("ProjectTitle").value;
    if(value.length > 2){
       document.getElementById("ProjectTitle").style['font-size'] = "12px";
    }else{
       document.getElementById("ProjectTitle").style['font-size'] = "14px";
    }
}

【讨论】：