firefox change height of textarea on enter not working

Question

I have been trying to change the height of textarea when the user hits enter so they do not have to scroll. i could mange it on IE and Chrome however i could not make it work on Firefox. Please have a look at my code. i am really new to this. it seems like it does not recognize event and i could not figure out a way around. Here is my code:

<form id="blog-comment-form" method="post" action="index.php">
<textarea id="comment" name="b_com" onkeyup="showmsg()"  placeholder="ADD YOUR COMMENT HERE"></textarea>
<input type="submit" name="submit" value="POST COMMENT"/>
</form>

i am calling the function from an external file. And my javascript code:

function showmsg() {

    if(!event){
           event= window.event;}
    if (event.keyCode==13) {
        var a = document.getElementById("comment");
    var b = document.getElementById("comment").style.scrollHeight;
    a.style.height = ((a.scrollHeight)+6) + "px"; 
}else {
    var a = document.getElementById("comment");
    var b = document.getElementById("testthis").style.height;
    a.style.height = ((a.scrollHeight)+6) + "px"; 
}

}

Thank You

Have you considered using a library that already takes care of the cross browser issues you are dealing with? — Brett Weber, Jul 17 '13 at 21:56
Is it important that your textarea resizes dynamically with user input? Maybe allowing the user to resize the textarea is an alternative option? `resize:vertical;` — Dolchio, Jul 17 '13 at 22:00

score 0 · Answer 1 · answered Jul 17 '13 at 21:40

0

You need to add rows attribute to text area. That will help you to increase the height of textarea

answered Jul 17 '13 at 21:40

Umesh Gohil

46
1

rows just specifies the height of the text area (in lines) probably based on the standard line height implemented... It is supported in all major browsers as an html attribute of textarea, but doesn't take into account that the OP is trying to set by a pixel height(based on the code present in the question..) – Brett Weber Jul 17 '13 at 21:53

score 0 · Answer 2 · answered Jul 17 '13 at 21:54

0

Instead of using the onkeyup attribute you can listen to the keyup event in a different way, that will also create the event object for you:

document.getElementById('comment').addEventListener('keyup', showmsg);

A working example: http://jsfiddle.net/rotev/FKDVD/1/

Tested on Firefox and Chrome.

answered Jul 17 '13 at 21:54

Rotem Harel

736
8
16

Did you try the working example? It's working on Firefox and Chrome. – Rotem Harel Jul 17 '13 at 22:09
i made a combination of your code with @Fabio 's code and now it is working in IE Chrome and Firefox. Thank You – Justin Jul 17 '13 at 22:16

score 0 · Answer 3 · edited May 23 '17 at 12:21

There a couple of things wrong with your code. On some browsers your event handling may not work correctly.

So firstly, you need to get the event from callback itself, and not use a global variable called event.

To resize the textarea you can use the properties cols and rows.

To handle the event, you can attach the callback in the following way:

function init(){
    var e = document.getElementById("comment");
    e.onkeyup = showmsg;
}

For more about event listener, check this out. To resize the textarea you may use rows:

function showmsg(event) {
    if (event.keyCode==13) {
        var a = document.getElementById("comment");
        a.rows++;
    }
}

To call init you may associate it to the element body:

<body onload="init()">

The final code would look like:

<html>
<head>
<script>
function init(){
    var e = document.getElementById("comment");
    e.onkeyup = showmsg;
}
function showmsg(event) {
    if (event.keyCode==13) {
        var a = document.getElementById("comment");
        a.rows++;
    }
}
</script>
</head>
<body onload="init()">
<form id="blog-comment-form" method="post" action="index.php">
<textarea id="comment" name="b_com" placeholder="ADD YOUR COMMENT HERE"></textarea>
<input type="submit" name="submit" value="POST COMMENT"/>
</form>
</body>
</html>

score 0 · Accepted Answer · answered Jul 17 '13 at 22:00

0

Write this:

function showmsg(event) {

in place of:

function showmsg() {

AND

write this (in HTML markup):

onkeyup="showmsg(event)"

in place of:

onkeyup="showmsg()"

answered Jul 17 '13 at 22:00

Fabio S

1,124
6
8

it works just fine now. i am dancing like Michael Jackson right now. man thanks a lot – Justin Jul 17 '13 at 22:10

firefox change height of textarea on enter not working

4 Answers4