Insert a new line to textarea using javascript (IE bug ?)

Question

I'm trying to implement following functionality. I would like to be able to catch keystroke of semicolon character and change it to automatically add new line after pressing this key. In code it looks like this :

var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode == 59){
            e.preventDefault();     
            var tmpStyle = j$("#styleEditor").val();                
            tmpStyle += ";\n";
            j$("#styleEditor").val(tmpStyle);                               
}

So, firstly i'm catching this key (with "keypress" event), then I'm stopping it normal behaviour and at the end I'm adding semicolon and new line character to the end of textarea content.

Now, everything works fine on FF, Chrome. However on IE 9 it behaves really strange - instead of adding new line it adds .. white space. Then, if backspace this white space and type ";" again it works as expected. You can reproduce it by firstly typing some other characters and then typing semicolon.

I've also noticed that removing e.preventDefault() removes this issue, although then it paste two semicolons into textarea. Can somebody help me with it ?

You can chceck my small demo on DEMO

have you added <!DOCTYPE html> to the top of your html file , sometimes such little things matters — Disha
yes it is added - jsfiddle, where the demo is placed, automatically takes care about that things — Artur Skrzydło

Vijay Vijay · Accepted Answer · 2015-02-04T12:21:00

You can remove e.preventDefault() and use event keyup instead of keypress.

function checkForSemicolons(e) {

    var style = j$("#styleEditor").value;
    var keyCode = e.keyCode ? e.keyCode : e.which;

    if (keyCode == 59) {
        //e.preventDefault();   
        var tmpStyle = j$("#styleEditor").val();
        tmpStyle += "\n";
        j$("#styleEditor").val(tmpStyle);


    }
}

fiddle:

http://jsfiddle.net/pmzzd56w/3/

Insert a new line to textarea using javascript (IE bug ?)

1 Answers