IE textarea line height issue on font size change
Question
I have a textarea and some links that use JavaScript to change the font size in the textarea. In Firefox, this works absolutely fine, but in IE, the line-height does not change. So, when the font shrinks, there are big gaps between the lines of text. When the font grows, the lines of text overlap.
I have tried adding in code to reset the line height to 1.5 x the font size, but it doesn't seem to accept it.
Here is my code:
HTML
<div class="font">
<a href="javascript:changeFont(10);" style="font-size: 10px">A</a>
<a href="javascript:changeFont(13);" style="font-size: 14px">A</a>
<a href="javascript:changeFont(16);" style="font-size: 18px">A</a>
<a href="javascript:changeFont(19);" style="font-size: 22px">A</a>
<a href="javascript:changeFont(22);" style="font-size: 26px">A</a>
<a href="javascript:changeFont(25);" style="font-size: 30px">A</a>
<a href="javascript:changeFont(28);" style="font-size: 34px">A</a>
<a href="javascript:changeFont(31);" style="font-size: 38px">A</a>
<a href="javascript:changeFont(33);" style="font-size: 42px">A</a>
<a href="javascript:changeFont(36);" style="font-size: 46px">A</a>
</div>
<textarea class="comment" name="comments" id="comments" placeholder="Message..."><?php if(isset($post_comments)){ echo $post_comments; } ?></textarea>
JavaScript
<script>
<!--
function changeFont(size) {
var lh = size * 1.5;
$('#comments').css('fontSize', size + 'px');
$('#comments').css('line-height', lh + 'px');
}
-->
</script>
Thank you in advance.
1 answers
solution1
0 2022-12-19 03:41:16
Here's the answer (nearly nine years after the question was asked):
The issue is that, under certain circumstances using MSHTML (via IE or an HTA), the line height in a textarea box is not automatically adjusted for the font size. In my testing I determined that this issue only occurs with IE=8 and only when the textarea width is set by percentage.
To see the issue, save the code below on Windows as an HTA file and run it via mshta.exe or save it as an HTM file and run it via iexplore.exe and then use the drop down menu to select size 24. You should see that the lines in the textarea overlap vertically.
There are two ways to fix the issue: 1) Change the content= setting to run in any mode, other than IE=8, such as IE=9 (both lower and higher modes work, but typically, you'll want to go up, not down). 2) For IE=8 mode, reset the textarea innerText and value each time the font size is changed (see commented code in the example below).
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=8">
<style>
#TA1 {width:100%}
</style>
</head>
<body>
<select id=fontsize onchange=changeFont()>
<option value=10>10</option>
<option value=24>24</option>
</select><br>
<textarea id=TA1></textarea>
<script>
var data = "abc\r\n123"
TA1.value = data
function changeFont()
{
var size = fontsize.options(fontsize.selectedIndex).value;
//TA1.innerText = ""; //uncomment to fix issue
//TA1.value = data; //uncomment to fix issue
TA1.style.fontSize = size + "pt";
}
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.