将文本div直接对齐输入文本

Question

我需要使用同名文字直接在input上淡出div文字字段的文字。

我可以请求div的偏移量，并将input置于同一位置。但是，它没有正确对齐（div显示在input的左上角。我只能通过手动轻推文本来对齐文本。

<input id="ip" type="text" value="Optimus Prime"></input>
<div id="op">Optimus Prime</div>
var absTopLeft = {
    height: '33px',
    fontSize: '15px',
    fontFamily: "Times New Roman,Georgia,Serif",
    position: 'absolute',
    left: 0,
    top: 0
};
$("#ip").css( absTopLeft );
$('#op').css( absTopLeft );

Fiddle here.

必须有更好的方法。特别是如果我将input的高度设置为不规则的内容或将input的文本居中。那更好的方法是什么？

Answer 1

这是一个仅限CSS的解决方案。

HTML

<div id="container">
    <input id="ip" type="text" value="Optimus Prime"></input>
    <div id="op">Optimus Prime</div>
</div>

CSS

#container {
    position: relative;
}

#ip, #op {
    width: 200px;
    height: 33px;
    font-size: 15px;
    line-height: 33px;
    font-family: 'Times New Roman', 'Georgia', serif;
}

#op {
    display: inline-block;
    position: absolute;
    top: -12px;
    left: 0px;
    border: 4px solid rgba(0,0,0,0);
}

Fiddle.

它看起来与Firefox 25保持一致。

请注意，浏览器具有不同的默认<input>样式，因此在其他任何地方都可能会出现几个像素。尝试尽可能地标准化样式元素（覆盖尽可能多的已知默认样式）;或使用像Normalize.css这样的CSS重置。

Answer 2

这非常有效（在safari / chrome中完美对齐），但Firefox中仍有1px的垂直和水平偏移。

var absTopLeft = {
    fontSize: '15px',
    fontFamily: "Times New Roman,Georgia,Serif",
    position: 'absolute',
    left: 0,
    top: 0
};
var ip = $("#ip"),
    op = $("#op");
ip.css( absTopLeft );
ip.css( 'height', 33 );
ip.css( 'color', 'green' );
op.css( absTopLeft );
op.css( 'color', 'red' );

var ipBorderLeft = parseInt( ip.css('border-left-width'), 10 ),
    ipPaddingLeft = parseInt( ip.css('padding-left'), 10 ),
    ipTextIndent = parseInt( ip.css('text-indent'), 10 ),
    ipMarginLeft = parseInt( ip.css('margin-left'), 10 );

op.css( 'left', ipBorderLeft + ipPaddingLeft + ipTextIndent + ipMarginLeft );

var htDiff = ip.outerHeight() - op.outerHeight();
op.css( 'top', htDiff/2 );

http://jsfiddle.net/3D3tM/