如何通过 Jquery/Javascript 知道以 px 为单位的占位符字符串宽度？

【问题标题】：How to know Placeholder String width in px by Jquery/Javascript?如何通过 Jquery/Javascript 知道以 px 为单位的占位符字符串宽度？
【发布时间】：2014-07-27 15:44:56
【问题描述】：

这里是html

<body style="background-color:#999;font-size:12px;">
    <div style="width:500px; height:500px; margin:30px auto; background-color:#9CC">
    <input id="Test" type='text' placeholder='Hello how are you' style="width:270px;" / >
    </div>
</body>

我只想知道文本宽度。不是输入宽度也不是字符数。请帮我提出适当的建议。

【问题讨论】：

对于宽度文本，您是指长度还是像素？
他想要占位符文本的宽度。
好的，但是字符数例如（17 个字符）或宽度例如。（100 像素）？
@napster3world How to know Placeholder String width in px
+1 提出一个好问题

标签： javascript jquery string placeholder

【解决方案1】：

您可以使用以下 sn-p:

var _$tmpSpan = $('<span/>').html($('#Test').attr('placeholder')).css({
    position: 'absolute',
    left: -9999,
    top: -9999
}).appendTo('body'),
    textWidth = _$tmpSpan.width();
_$tmpSpan.remove();
alert(textWidth);

--DEMO--

【讨论】：

太棒了，我认为您刚刚所做的是否正确。获取占位符文本并将其包裹在跨度中得到跨度的宽度？？？？
@user3127499 是的，这就是这里的想法。现在，根据适用于特定元素的任何特定 CSS 规则，例如，如果输入设置了特定的字体大小，则可能返回错误的结果。这也可以处理
但它显示lh5.googleusercontent.com/-7ZC0DWrMnDk/U5GpsI0OnNI/AAAAAAAAADk/…，我发现lh5.googleusercontent.com/-6ZPcRHem7Eg/U5GpsNh9zBI/AAAAAAAAADg/… 105px
是的@A.Wolff 你是对的。这些是不同的，因为占位符 CSS 和 SPAN 标签 css 不匹配
@A.Wolff 我只是稍微编辑一下你的代码并找到答案非常感谢jsfiddle.net/goldfingerxyz/FwHg4