Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.09.2010, 21:40
Интересующийся
Отправить личное сообщение для Vovan222 Посмотреть профиль Найти все сообщения от Vovan222
 
Регистрация: 09.09.2010
Сообщений: 15

изменение размера textarea
Есть textarea:
<html>
    <head>
    </head>
    <body>
        <textarea style="width:300px; height:80px;"></textarea>
    </body>
</html>

Можно ли сделать так чтобы когда вводишь текст, то когда он не помещается в textarea по вертикали, то вертикальная полоса прокрутки не появлялась, а вместо этого textarea динамически меняла бы увеличивала свой размер по высоте?
Ответить с цитированием
  #2 (permalink)  
Старый 09.09.2010, 21:45
Аватар для Riim
Рассеянный профессор
Отправить личное сообщение для Riim Посмотреть профиль Найти все сообщения от Riim
 
Регистрация: 06.04.2009
Сообщений: 2,379

Можно.
Ответить с цитированием
  #3 (permalink)  
Старый 09.09.2010, 21:48
Интересующийся
Отправить личное сообщение для Vovan222 Посмотреть профиль Найти все сообщения от Vovan222
 
Регистрация: 09.09.2010
Сообщений: 15

Riim,
подскажите пожалуйста как ?
Ответить с цитированием
  #4 (permalink)  
Старый 09.09.2010, 22:41
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Как-то так

<script type="text/javascript">
window.onload = function(){
	document.getElementById("element").onkeyup = function(){
		var getText = this.value;
		var getRegs = getText.match(/^.*(\r\n|\n|$)/gim);
		var setText = false;
		for(var i = 0; i < getRegs.length; i++){
			getText = getRegs[i].replace(/\r|\n/g, "");
			setText += getText.length ? Math.ceil(getText.length / 50) : 1;
		}
		this.rows = setText;
	};
};
</script>
<textarea rows="10" cols="50" id="element" style="overflow: hidden; min-height: 200px"></textarea>

Последний раз редактировалось monolithed, 10.09.2010 в 18:13.
Ответить с цитированием
  #5 (permalink)  
Старый 10.09.2010, 04:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,841

Вариант тянущейся textarea ....
<!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;
}
</style>
<script language="JavaScript" type="text/javascript">
function flexibleTextarea(b) {
    var a = document.getElementById(b) || b;
    if (a) {
        a.style.overflow = "hidden";
        var e = a.rows = a.rows > 0 ? a.rows : 2;
        b = a.cols = a.cols > 0 ? a.cols : 20;
        var g = RegExp("([^\r\n]{" + b + "})([^\r\n])"),
            f = RegExp("[^\n]{" + b + "}\n?$|[^\n]{0," + b + "}\n");
        a.onkeyup = a.onkeydown = function () {
            a.value = a.value.replace(g, "$1\r\n$2");
            for (var c = 0, d = a.value; d.search(f) >= 0;) {
                c++;
                d = d.replace(f, "")
            }
            c += 2;
            if (c < e) c = e;
            a.rows = c
        }
    }
};
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>
Ответить с цитированием
  #6 (permalink)  
Старый 10.09.2010, 08:41
Интересующийся
Отправить личное сообщение для Vovan222 Посмотреть профиль Найти все сообщения от Vovan222
 
Регистрация: 09.09.2010
Сообщений: 15

рони,
а можно ли убрать лишнюю строчку внизу?
Ответить с цитированием
  #7 (permalink)  
Старый 10.09.2010, 08:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,841

Vovan222,
c += 2; => c++;
Ответить с цитированием
  #8 (permalink)  
Старый 10.09.2010, 09:57
Интересующийся
Отправить личное сообщение для Vovan222 Посмотреть профиль Найти все сообщения от Vovan222
 
Регистрация: 09.09.2010
Сообщений: 15

рони Спасибо за пример все работает, однако в IE и Opera наблюдаю такой баг: При печати текста, textarea расширяется на одну строчку по вертикали даже тогда когда в последней строчке еще есть место примерно для 10 символов

Ответить с цитированием
  #9 (permalink)  
Старый 10.09.2010, 15:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,841

Vovan222,
Проблема в том что если символы вводятся постоянно есть необходимость принудительно вставлять перевод строки ...пока так как есть
можно ещё вариант посмотреть тут http://markup-javascript.com/2009/07...asya-textarea/
Ответить с цитированием
  #10 (permalink)  
Старый 10.09.2010, 18:20
Интересующийся
Отправить личное сообщение для Vovan222 Посмотреть профиль Найти все сообщения от Vovan222
 
Регистрация: 09.09.2010
Сообщений: 15

рони,
этот пример в опере вообще работает.
А Ваш пример можно как-то исправить, ведь в FF все работает отлично
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение размера окна браузера pv! Общие вопросы Javascript 10 29.09.2019 09:45
Изменение размера изображения(img) kjs Общие вопросы Javascript 2 19.06.2010 12:55
изменение размера lex Элементы интерфейса 1 09.03.2010 20:58
textarea validation Петр Общие вопросы Javascript 3 08.12.2009 18:59
Изменение размера блока реклама в зависимости от разрешения экрана. toxiz77 Общие вопросы Javascript 3 11.02.2009 14:12