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

Question

I have the following scenario, I have a number of links and whenever one of them clicked font-size and line-height css properties of the textarea set accordingly.

This is an 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 />

And this is a JavaScript code

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

It works perfectly in all browsers except IE10 (didn't tested in IE9, but it is a target too.) The font-size gets applied but line-height takes effect only after the value of the textarea is changed somehow.

here is the working demo.

• Is there any workaround for that? (Programmatically removing and inserting the text back is the least welcomed)
• Is there any approach to make the line-height automatic?

Answer 1

Since the line-height just updates if you change something, let's give IE something to trigger the update:

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

Tested on IE9 and Chrome. Don't have IE10 to test unfortunately but will work I think.

jsFiddle

Update: There are alot of ugly things we can do. To make IE update, we need to actually make it change it's width, height or text.

So you can also do like 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

I've just found out a workaround ( fiddle ). Create a wrapper div where you define the dimensions of your textarea.

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

Then define the size of the textarea in %:

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

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

Now rotational increase the width to 100.01% then decrease it back to 100%. Because IE needs this change to get it going(???).

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

I think this is just a bug and I have absolutely no idea why this is working. It looks like changes in a very small % range which can not be calculated into a usable pixel value and therefore will not result in a visual change still fire the needed "change event" on the textbox. I've developed this sollution based on an information in the msdn forums .