如何将占位符文本缩小以适合其文本输入元素并显示其整个值？

Question

我有以下HTML:

<form>
    <table border="1">
        <tr>
            <td>Traveler's name:</td>
            <td>
                <input type="text" id="travelername" placeholder="Last Name, First Name, Middle Initial"/>
            </td>
        </tr>
        <tr>
            <td>Traveler's E-mail:</td>
            <td>
                <input type="email" id="traveleremail"/>
            </td>
        </tr>
    </table>
</form>

我希望占位符val始终完全可见,但它不是:

我尝试添加这个CSS:

input[placeholder] {
    font-size: 0.6em;
}

...但是,虽然这会令人钦佩地缩小字体大小,但文本会被截断:

我尝试像这样添加到CSS:

input[placeholder] {
    font-size: 0.6em;
    width: 500;
}

...但是在输入文本中扩展/扩展占位符的文本区域没有任何作用(输入文本足够宽以容纳缩小的文本,但它本身仍然被压缩成一个太小的区域).

如何实现这一目标？

Answer 1

原始回复 - 2015年7月

做这样的事情怎么样？我用jQuery来演示它.如果您希望它在文本宽度方面更"精确",您可以查看获取文本宽度的方法,然后将jquery的CSS中的宽度设置为从获取文本宽度的函数返回的值(在这种情况下,您可能需要创建一个元素,将其html设置为占位符的内容,获取文本的宽度,然后删除元素).无论如何,下面的代码是我要做的就是你要做的事情.

我决定使用,setInterval因为对输入字段的更改不是黑白的.each循环输入元素.然后代码检查输入是否为空,如果是,则缩小字体大小(当我硬编码时为10px),否则将其设置为默认值(假设你想要14px,它得到14px).

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);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
    <table border="1">
        <tr>
            <td>Traveler's name:</td>
            <td>
                <input type="text" id="travelername" placeholder="Last Name, First Name, Middle Initial"/>
            </td>
        </tr>
        <tr>
            <td>Traveler's E-mail:</td>
            <td>
                <input type="email" id="traveleremail"/>
            </td>
        </tr>
    </table>
</form>

如果需要,可以降低或增加setInterval函数的间隔,使其更快或更慢地执行(请记住性能和不同的计算速度)

编辑 - 2017年5月

看到这个问题被观看了一千多次,我觉得我应该更新我的答案,使其更有用,更少依赖于手动输入.

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

• 为输入字段及其相关克隆创建CSS样式(这个逻辑可以根据您的需要进行定制,但为了简单起见,我已经为所有输入元素克隆提供了相同的类)
• 循环遍历所有input元素并创建克隆
• 获取克隆的宽度,并将其宽度与输入元素的宽度进行比较,同时减少font-size每次迭代的时间step
• 一旦克隆的宽度小于或等于输入元素的宽度,我们删除克隆元素并设置输入font-size.
• 当用户输入内部input元素,我们取消了我们的变化font-size

注意:当" 撤消 "对input元素的更改时,我们实际上是删除了内联 属性和值.这些元素的任何样式都应该在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 = $('<span></span>')
        .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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <table border="1">
    <tr>
      <td>Traveler's name:</td>
      <td>
        <input type="text" id="travelername" placeholder="Last Name, First Name, Middle Initial" />
      </td>
    </tr>
    <tr>
      <td>Traveler's E-mail:</td>
      <td>
        <input type="email" id="traveleremail" />
      </td>
    </tr>
  </table>
</form>