javascript - 响应式占位符文本

我需要一个包含动态值的placeholder：

<input type="text" placeholder="Search by Name, Order Number and Location" style="width: 300px" />

<input type="text" placeholder="Search by Name" style="width: 300px" />

并且我需要在“输入”字段中显示所有占位符文本。减小字体大小是可以的，但是需要采用动态方式。

任何想法？

最佳答案

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <table border="1">
    <tr>
      <td>Name:</td>
      <td>
        <input type="text" id="name1" placeholder="Search by Name, Order Number and Location" />
      </td>
    </tr>
    <tr>
      <td>Name:</td>
      <td>
        <input type="text" id="name2" placeholder="Search by Name"/>
      </td>
    </tr>
  </table>
</form>

创建另一个字段并将其附加