响应式占位符文本

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>

创建另一个字段并追加它