firefox change height of textarea on enter not working

Я пытаюсь изменить высоту textarea, когда пользователь нажимает, чтобы они не прокручивались. я мог бы использовать его в IE и Chrome, но я не мог заставить его работать в Firefox. Пожалуйста, посмотрите мой код. Я действительно новичок в этом. похоже, что он не распознает событие, и я не мог понять, как это сделать. Вот мой код:firefox change height of textarea on enter not working

<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>

я звоню функцию из внешнего файла. И мой Javascript код:

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"; 
} 

}

Спасибо

источник

2013-07-17 Justin

Рассматривали ли вы с помощью библиотека, которая уже заботится о проблемах с перекрестным браузером, с которыми вы работаете с? –

Важно ли, чтобы ваша текстовая область динамически изменялась с использованием пользовательского ввода? Может быть, разрешить пользователю изменять размер текстового поля является альтернативным вариантом? 'resize: vertical;' – Dolchio

Напишите это:

function showmsg(event) {

вместо:

function showmsg() {

напиши это (в HTML-разметке):

onkeyup="showmsg(event)"

вместо:

onkeyup="showmsg()"

источник

2013-07-17 22:00:28

сейчас он отлично работает. Сейчас я танцую, как Майкл Джексон. человек очень благодарен – Justin

Вам нужно добавить строки атрибут текстовой области. Это поможет вам увеличить высоту текстового поля

источник

2013-07-17 21:40:26

Как я могу сделать это правильно, чтобы он работал во всех браузерах? – Justin

строки просто определяют высоту текстовой области (в строках), вероятно, на основе стандартной высоты строки, реализованной ... Она поддерживается во всех основных браузерах как атрибут html текстового поля, но не учитывает, что OP пытаясь установить высоту пикселя (на основе кода, присутствующего в вопросе ..) –

Вместо использования OnKeyUp атрибута вы можете слушать событие KeyUp по-другому, что также создаст объект события для вас:

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

A рабочий пример: http://jsfiddle.net/rotev/FKDVD/1/

Протестировано на Firefox и в Chrome.

источник

2013-07-17 21:54:10

Не могли бы вы рассказать проголосовали? –

Я только что попробовал, но не смог заставить его работать – Justin

Вы попробовали рабочий пример? Он работает с Firefox и Chrome. –

В коде есть пара ошибок. В некоторых браузерах обработка событий может работать некорректно.

Итак, сначала вам нужно получить событие от обратного вызова, а не использовать глобальную переменную, называемую событием.

Чтобы изменить размер текстового поля, вы можете использовать свойства cols и rows.

Для обработки события, вы можете прикрепить функцию обратного вызова следующим образом:

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

Более подробную информацию о прослушивателя событий, проверьте this out. Чтобы изменить текстовую вы можете использовать строки:

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

Для вызова инициализации вы можете связать его с телом элемента:

<body onload="init()">

Конечный код будет выглядеть так:

<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>

источник

2013-07-17 21:55:59 wendelbsilva

ответ

Смежные вопросы