応答プレースホルダーテキスト

Question

は、私は動的な値が含まれます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" /> 

を、私は入力フィールド内のすべてのプレースホルダーテキストを表示する必要があります。フォントサイズを小さくすることはできますが、動的にする必要があります。

Answer 1

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>

別のフィールドを作成し、私はあなたがあなたの投稿を編集示唆