Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 11.09.2010, 07:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

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>
Ответить с цитированием
  #12 (permalink)  
Старый 11.09.2010, 08:55
Интересующийся
Отправить личное сообщение для Vovan222 Посмотреть профиль Найти все сообщения от Vovan222
 
Регистрация: 09.09.2010
Сообщений: 15

рони,
в ie работает, однако в Opera наблюдаю следующее, когда беспрерывно печатаешь на последней строчке, то при первом расширении textarea на новой строчке печатаешь несколько символов и затем создается новая строчка и курсор перескакивает туда. Интересно почему так?
Ответить с цитированием
  #13 (permalink)  
Старый 11.09.2010, 11:11
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

<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;
Ответить с цитированием
  #14 (permalink)  
Старый 11.09.2010, 11:35
Интересующийся
Отправить личное сообщение для Vovan222 Посмотреть профиль Найти все сообщения от Vovan222
 
Регистрация: 09.09.2010
Сообщений: 15

Octane,
ничего себе, так просто. Спасибо Вам за код. Подскажите пожалуйста почему когда в опере открываешь этот код, то при наборе букв textarea уменьшает свой размер?


Ответить с цитированием
  #15 (permalink)  
Старый 11.09.2010, 11:53
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

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

Octane,
странно, смотрю в FF код через этот форум - буква утопает вниз, копировал и запустил на локальной машине - все в порядке. Однако в Opera наблюдаю еще один баг: допустим когда печатаем в последней строчке текст

то после ее переполнения в других браузерах textarea расширяется и добавляется новая строчка, а в Opera по всей видимости происходит прокрутка, которой не видно и textarea сразу не расширяется

но после того как введешь следующий символ, то textarea расширятся вновь


Подскажите можно ли это как-нибудь вылечить?
Ответить с цитированием
  #17 (permalink)  
Старый 11.09.2010, 17:17
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

А зачем? Кто будет печатать такое в сообщении? Если нормально печатать, то keyup будет возникать после ввода каждого символа, и textarea будет увеличивать свой размер, когда нужно.

Что тут реально нужно сделать, так это:
1. Уменьшить количество попыток изменения размера textarea. Для этого нужно хранить старое значение scrollHeight и сравнивать с новым по keyup.
2. Сделать расчет высоты при инициализации скрипта для texarea, содержащего текст, а так же при изменении textarea.value скриптом.

Но с этим, думаю, вы уже справитесь сами, я лишь показал идею, как сделать проще, чем в примере рони, без изменения вводимого текста.

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

Спасибо Вам большое, ну если честно мне это нужно не для сообщений )). Последний вопрос на эту тему в предыдущем после с картинками видно что при переносе на следующую строчку текст как будто прокручивается вверх. Это возникает только в Opera, соответственно мне бы хотелось от этого избавиться. Можно ли как-нибудь заблокировать эти прокрутки??? Помогите пожалуйста кодом.
Сообщение от Octane Посмотреть сообщение
я лишь показал идею, как сделать проще, чем в примере рони, без изменения вводимого текста.
То что предложил ронни и Вы, это по сути одно и тоже? просто Ваш пример очень компактный и простой. Кстати по поводу того что break-word работает в Opera только после 10.5 версии, нашел в инете вот такой пример:
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+ */
}

это поможет?
Ответить с цитированием
  #19 (permalink)  
Старый 11.09.2010, 18:08
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Сообщение от Vovan222
при переносе на следующую строчку текст как будто прокручивается вверх. Это возникает только в Opera, соответственно мне бы хотелось от этого избавиться. Можно ли как-нибудь заблокировать эти прокрутки???
Сброс padding не помог? Тогда не знаю, надо искать решение.

Сообщение от Vovan222
То что предложил ронни и Вы, это по сути одно и тоже?
Результат одинаковый, реализация разная. Вы, видимо, не пытались или не хотели разобраться, как работает ни один из примеров.

Сообщение от Vovan222
это поможет?
Попробуйте, узнаете.
Ответить с цитированием
  #20 (permalink)  
Старый 11.09.2010, 18:40
Профессор
Отправить личное сообщение для tenshi Посмотреть профиль Найти все сообщения от tenshi
 
Регистрация: 20.03.2008
Сообщений: 1,183

contentEditable="true" ;-)
__________________
.ня
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение размера окна браузера pv! Общие вопросы Javascript 10 29.09.2019 08: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