0

次のコードがあります。

$(".translated").mouseenter(function(){
    if ($(this).hasClass("editable")){
        return;
    }
    var h=$(this).height();
    var w=$(this).width();
    $(this).empty();
    $("<input/>", {
        type: "text",
        height:h,
        width:w,
        value:$(this).text()
        }).appendTo(this);
    $(this).height(h);
    $(this).width(w);
    $(this).addClass("editable");
});

<div>このコードは、コンテナからテキストを削除し、<input>アイテムを挿入します。しかし、問題があります。 と の値にもかかわらず、新しいアイテム<input>の高さが<div>コンテナーよりも大きくなります。どうすれば修正できますか？ hw

4

1 に答える 1

0

要素の境界線とパディングによって占有される余分なスペースを計算し、<input>それをコンテナの高さから差し引く必要があり<div>ます。<input>これにより、要素を設定するために必要な実際の高さが得られます。

var h = $(this).height(); // The height of the container <div>
//...
var $newInput = $("<input/>", { type: "text", value:$(this).text()}).appendTo(this);
var fullHeight = newElem.outerHeight();
var innerHeight = newElem.height();
var paddingEtc = fullHeight - innerHeight;
$newInput.height(h - paddingEtc);

の幅を設定するには、おそらく同じ方法に従う必要があります<input>。

ここで動作しているのを見ることができます (現時点では高さのみ): http://jsfiddle.net/XrGxx/

于 2012-11-29T22:22:56.770 に答える