IE8 add double lines when clicking entering

[yuren1978]

I am playing the page http://bgrins.github.com/ExpandingTextareas/, and each time, you click "Enter", there will be extra space entered below.

I will do some research to see if I can come up with a patch. Other than that, the plug in really works great.

[bgrins]

Are you saying that there are two extra lines added each time there should only be one added, or that there is always one extra line at the bottom?

Definitely keep us posted if you are able to find anything about what is causing this issue!

[yuren1978]

yes, you are right, there are two extra lines added in IE8.

[gr2m]

I'm running into the same issue, but cannot confirm that two extra lines are added. When I check innerText with JavaScript, the number of new lines is correct. It must be something else, I couldn't figure it out yet.

Anybody found a solution for this?

[gr2m]

What I ended up doing is setting line height of .textareaClone div to half of what textarea has, and adding top & bottom padding to a quarter of textarea's line-heihgt.

textarea {
  line-height:      1.6em;
}

/* apply these to IE < 9 only */
.expandingText textarea {
  overflow:         hidden;
}
.expandingText .textareaClone div {
  line-height:      .8em;
  padding-bottom:   .4em;
  padding-top:      .4em;
}

[alfred-c]

It seems that carriagereturn-newline in a pre tag is treated as 2 newlines in IE8. So if you change the resize method to replace the carriagereturn-newline with just newline, it seems to work correctly.

function resize() {
    $(this).closest('.expandingText').find("div").text(this.value.replace(/\r\n/g, "\n") + ' ');
    $(this).trigger("resize.expanding");
}

[bgrins]

Closed by pull request #21