javascript - 使用 JQuery 设置输入项的大小

Question

有以下代码：

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

Answer 1

您需要计算元素的边框和填充占用了多少额外空间<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/