Vovan222,
))) Примечание: максимальное количество символов в одной строке зависит от типа браузера. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>изменение размера textarea</title> <style type="text/css"> body { background-color:#004B52; } textarea{ background-color: #FF0000; color:yellow; font-size: medium; } </style> <script language="JavaScript" type="text/javascript"> function flexibleTextarea(b) { var a = document.getElementById(b) || b; if (a) { a.style.overflow = "hidden"; a.cols = a.cols > 0 ? a.cols : 20; var c = a.rows = a.rows > 0 ? a.rows : 2; a.rows = 1; b = -1; var f = a.value; for (a.value = ""; a.scrollHeight <= a.clientHeight && a.scrollWidth <= a.clientWidth;) { a.value += "0"; b++ } a.value = f; a.rows = c; var g = RegExp("([^\r\n]{" + b + "})([^\r\n])"); a.onkeyup = a.onkeydown = function () { a.value = a.value.replace(g, "$1\r\n"); for (var d = 1, e = a.value; e.search(/\r?\n/) > -1;) { d++; e = e.replace(/\r?\n/, "") } a.rows = d < c ? c : d } } }; window.onload = function(){ flexibleTextarea('textarea'); flexibleTextarea('textarea1'); } </script> </head> <body> <textarea id='textarea' rows="3" cols="50" ></textarea> <br /> <textarea id='textarea1' ></textarea> </body> </html> |
рони,
в ie работает, однако в Opera наблюдаю следующее, когда беспрерывно печатаешь на последней строчке, то при первом расширении textarea на новой строчке печатаешь несколько символов и затем создается новая строчка и курсор перескакивает туда. Интересно почему так? |
<textarea id="text" rows="1" cols="60"></textarea> <script> var textarea = document.getElementById("text"), style = textarea.style; style.overflow = "hidden"; style.wordWrap = "break-word"; textarea.onkeyup = function () { if (/*@cc_on!@*/1) { style.height = "auto"; } style.height = this.scrollHeight + "px"; }; textarea.onscroll = function () { this.scrollTop = 0; }; </script>В Opera будет работать начиная с версии 10.50, в более старых отсутствует поддержка word-wrap: break-word; |
Octane,
ничего себе, так просто. Спасибо Вам за код. Подскажите пожалуйста почему когда в опере открываешь этот код, то при наборе букв textarea уменьшает свой размер? ![]() ![]() |
padding, наверное, надо сбросить
|
Octane,
странно, смотрю в FF код через этот форум - буква утопает вниз, копировал и запустил на локальной машине - все в порядке. Однако в Opera наблюдаю еще один баг: допустим когда печатаем в последней строчке текст ![]() то после ее переполнения в других браузерах textarea расширяется и добавляется новая строчка, а в Opera по всей видимости происходит прокрутка, которой не видно и textarea сразу не расширяется ![]() но после того как введешь следующий символ, то textarea расширятся вновь ![]() Подскажите можно ли это как-нибудь вылечить? |
А зачем? Кто будет печатать такое в сообщении? Если нормально печатать, то keyup будет возникать после ввода каждого символа, и textarea будет увеличивать свой размер, когда нужно.
Что тут реально нужно сделать, так это: 1. Уменьшить количество попыток изменения размера textarea. Для этого нужно хранить старое значение scrollHeight и сравнивать с новым по keyup. 2. Сделать расчет высоты при инициализации скрипта для texarea, содержащего текст, а так же при изменении textarea.value скриптом. Но с этим, думаю, вы уже справитесь сами, я лишь показал идею, как сделать проще, чем в примере рони, без изменения вводимого текста. |
Спасибо Вам большое, ну если честно мне это нужно не для сообщений )). Последний вопрос на эту тему в предыдущем после с картинками видно что при переносе на следующую строчку текст как будто прокручивается вверх. Это возникает только в Opera, соответственно мне бы хотелось от этого избавиться. Можно ли как-нибудь заблокировать эти прокрутки??? Помогите пожалуйста кодом.
Цитата:
textarea { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } это поможет? |
Цитата:
Цитата:
Цитата:
|
contentEditable="true" ;-)
|
Часовой пояс GMT +3, время: 12:37. |