https://stackoverflow.com/questions/17710725
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianWrite this:
function showmsg(event) {
in place of:
function showmsg() {
AND
write this (in HTML markup):
onkeyup="showmsg(event)"
in place of:
onkeyup="showmsg()"
firefox change height of textarea on enter not working
-
03-06-2022 - |
سؤال
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
المحلول
نصائح أخرى
You need to add rows attribute to text area. That will help you to increase the height of textarea
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.
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>
لا تنتمي إلى StackOverflow
