Javascript 使用JQuery设置输入项的大小

有以下代码：

$(".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");
});

$（.translated”）.mouseenter（函数（）{
if（$（this）.hasClass（“可编辑”））{
返回；
}
var h=$（this.height（）；
var w=$（this.width（）；
$（this.empty（）；
$("", {
键入：“文本”，
高度:h,，
宽度：w，
值：$（this.text（））
}).附于（本）；
$（此）。高度（h）；
$（此）。宽度（w）；
$（此）.addClass（“可编辑”）；
});

---

此代码从

容器中删除文本，并将

项插入其中。但问题是：新的

项的高度大于

容器，尽管

h

和

w

的值不同。我怎样才能修好它

您需要计算

元素的边框和填充所占用的额外空间，然后从容器的高度中减去该空间。这将为您提供设置

元素所需的实际高度：

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);

var h=$（this）.height（）；//容器的高度
//...
var$newInput=$（“”，{type:“text”，值：$（this）.text（）}）.appendTo（this）；
var fullHeight=newElem.outerHeight（）；
var innerHeight=newElem.height（）；
var paddingEtc=全高-内高；
$newInput.height（h-填充等）；

您可能还必须遵循相同的方法来设置

的宽度

---

您可以看到它在这里工作（目前只有高度）：

您应该考虑

input

和

div

的边框和边距（取决于您的css）。您还可以使用

jQuery.fn.outerHeight

（请参阅）。请记住CSS框模型：使用

.outerHeight（）

可能更糟糕