Question

我有以下情况，我有许多链接，每当其中一个链接点击相应的textarea的font-size和line-height css属性时。

这是一个HTML。

<textarea cols="50" id="Target" style="width:400px; height:200px;" rows="20"></textarea>
<br />
<a class="changer" href="javascript:;" data-size="10">10</a><br />
<a class="changer" href="javascript:;" data-size="20">20</a><br />
<a class="changer" href="javascript:;" data-size="30">30</a><br />
<a class="changer" href="javascript:;" data-size="40">40</a><br />

这是一个JavaScript代码

$(function(){
    $(".changer").click(function(){
        var size = $(this).data("size");
        $("#Target").css({
            "font-size": size + "px",
            "line-height": (size + 5) + "px"
        });
    });
});

它在除IE10之外的所有浏览器中都运行良好（未在IE9中测试，但它也是目标。）font-size被应用但line-height仅在textarea的值之后生效以某种方式改变了。

here 是工作演示。

有没有解决方法？（以编程方式删除和插入文本是最不受欢迎的）
有没有办法让line-height自动生成？

Answer 1

由于line-height只是在你改变某些东西时更新，我们给IE一些东西来触发更新：

$(function(){
    $(".changer").click(function(){
        var size = $(this).data("size");
        var text = $("#Target").text(); //grab current text
        $("#Target").css({
            "font-size": size + "px",
            "line-height": (size + 5) + "px"
        }).text(text); //change text with text (same thing, just to trigger the update)
    });
});

在IE9和Chrome上测试过。不幸的是，不要让IE10进行测试，但我认为它会起作用。

jsFiddle

<强>更新我们可以做很多丑陋的事情。要进行IE更新，我们需要实际更改它的宽度，高度或文本。

所以你也可以这样做this one：

$(function(){
    $(".changer").click(function(){
        var size = $(this).data("size");
        $("#Target").css({
            "font-size": size + "px",
            "line-height": (size + 5) + "px",
            "width":$("#Target").width()+1
        }).css({
            "width":$("#Target").width()-1
        });
    });
});

Answer 2

我刚刚找到了一种解决方法（fiddle）。创建一个包装器div，您可以在其中定义textarea的尺寸。

<div id="txt_wrapper"><textarea id="Target">This is my text, it spans multiple lines. Line height is not applied immediately</textarea></div>

然后在％：

中定义textarea的大小

#txt_wrapper {
    width: 400px;
    height: 200px;
}

#txt_wrapper textarea {
    width: 100%;
    height: 100%;
}

现在旋转将宽度增加到100.01％然后将其减小到100％。因为IE需要这种改变才能实现（???）。

$(function(){
    var changewidth = 100;
    $(".changer").click(function(){
        var size = $(this).data("size");
        if(changewidth == 100) changewidth = changewidth + 0.01;
        else changewidth = changewidth - 0.01;
        $("#Target").css({
            "font-size": size + "px",
            "line-height": (size + 5) + "px",
            "width": changewidth+"%"
        });
    });
});

我认为这只是一个错误，我完全不知道为什么这样做。看起来像非常小的％范围内的变化无法计算为可用的像素值，因此不会导致视觉变化仍然会激发文本框中所需的“更改事件”。我根据an information in the msdn forums开发了这种溶剂。

在IE10中没有立即应用textarea line-height

2 个答案: