原始回复 - 2015年7月

这个怎么样？我用jQuery示范了一下。如果你想更精确地设置字体宽度，你可以找一个获取文本宽度的方法，然后在jquery的CSS中设置宽度为从获取文本宽度函数返回的值(在这种情况下，你可能要创建一个元素，将其HTML设置为占位符的内容，获取文本宽度，然后删除元素)。在任何情况下，下面的代码就是我要完成你所要求的事情。

我决定使用setInterval，因为获取输入字段的变化不是黑白分明的。each循环遍历所有输入元素。然后代码检查输入是否为空，如果是，就降低字体大小(我硬编码为10像素)，否则将其设置为默认值(比如说你想要14像素，它就会得到14像素)。

setInterval(function() {
    $('input').each(function(){
        if($(this).val() === ''){
            $(this).css({
                "width":$(this).width()+"px",
                "height":$(this).height()+"px"
            });
            if(parseFloat($(this).css('font-size'))<=14){
                $(this).animate({
                    "font-size":10+"px"
                });
            }
        }
        else {
            $(this).finish().clearQueue().css({
                "font-size":14+"px"
            });
        }
    });
}, 100);

    

        

            
Traveler's name:
            

                
            
        
        

            
Traveler's E-mail:
            

                
            
        
    

如果您愿意，您可以降低或提高 setInterval函数的间隔时间，以使函数执行更快或更慢(要考虑性能和不同的计算速度)

编辑 - 2017年5月

看到这个问题已经被查看了一千多次，我觉得我应该更新我的回答，让它更有用，更不依赖手动输入。

以下代码的工作原理如下：

• 创建输入字段和它们关联的克隆体的CSS样式(该逻辑可以根据您的需要进行自定义，但为简单起见，我给所有输入元素克隆体赋了相同的类)
• 循环遍历所有input元素并创建一个克隆体
• 获取克隆体的宽度，将其与输入元素的宽度进行比较，同时通过step来减小每次迭代的font-size
• 一旦克隆体的宽度小于或等于输入元素的宽度，我们就删除克隆体元素并设置输入的font-size。
• 在input元素内进行用户输入时，我们会撤销我们对font-size的更改

注意: 当"撤消"对输入元素的更改时，我们实际上是移除内联属性和值。这些元素的任何样式都应该在CSS中完成(或者你将不得不尝试绕开这个问题，比如创建一个带有id的隐藏元素，访问它，获取样式并将其应用回输入元素)。

在测试下面的代码时，我个人发现0.1的步长已经足够了，值更小的值(比如0.01)会影响性能。然而，您可以随意调整这个值。

// Step is used to reduce font-size by value X
var step = 0.1;
setInterval(function() {
  // Loop over input elements
  $('input').each(function() {
    // Only change font-size if input value is empty (font-size should only affect placeholder)
    if ($(this).val() === '') {
      // Create clone
      $clone = $('')
        .appendTo('body')
        .addClass('inputClone')
        .text($(this).attr('placeholder'));
      // Adjust font-size of clone
      var fontSize = $(this).css('font-size');
      do {
        fontSize = parseFloat($clone.css('font-size')) - step;
        $clone.css({
          'font-size': fontSize
        });
      } while ($clone.width() > $(this).width());
      // Maintain input field size
      $(this).css({
        "width": $(this).width() + "px",
        "height": $(this).height() + "px"
      });
      // Change input font-size
      $(this).animate({
        'font-size': fontSize
      });
      // Delete clone
      $clone.remove();
    } else {
      // Default input field back to normal
      $(this)
        .finish()
        .clearQueue()
        .attr('style', function(i, style) {
          // Remove inline style for font-size
          return style.replace(/font-size[^;]+;?/g, '');
        });
    }
  });
}, 100);

input,
.inputClone {
  font-family: "Arial", Helvetica, sans-serif;
  font-size: 14px;
}

  

    

      
Traveler's name:
      

        
      
    
    

      
Traveler's E-mail: