| Vovan222 | 10.09.2010 09:57 |
рони Спасибо за пример все работает, однако в IE и Opera наблюдаю такой баг: При печати текста, textarea расширяется на одну строчку по вертикали даже тогда когда в последней строчке еще есть место примерно для 10 символов
изменение размера textarea
Есть textarea:
<html>
<head>
</head>
<body>
<textarea style="width:300px; height:80px;"></textarea>
</body>
</html>
Можно ли сделать так чтобы когда вводишь текст, то когда он не помещается в textarea по вертикали, то вертикальная полоса прокрутки не появлялась, а вместо этого textarea динамически меняла бы увеличивала свой размер по высоте? |
Можно.
|
Riim,
подскажите пожалуйста как ? |
Как-то так
<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>
|
Вариант тянущейся 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>
|
рони,
а можно ли убрать лишнюю строчку внизу? |
Vovan222,
|
рони Спасибо за пример все работает, однако в IE и Opera наблюдаю такой баг: При печати текста, textarea расширяется на одну строчку по вертикали даже тогда когда в последней строчке еще есть место примерно для 10 символов
|
Vovan222,
Проблема в том что если символы вводятся постоянно есть необходимость принудительно вставлять перевод строки ...пока так как есть можно ещё вариант посмотреть тут http://markup-javascript.com/2009/07...asya-textarea/ |
рони,
этот пример в опере вообще работает. А Ваш пример можно как-то исправить, ведь в FF все работает отлично |
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" ;-)
|
Цитата:
if (/*@cc_on!@*/1) {
style.height = "auto";
}
|
Можно так попробовать:
<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,
хмм, т.е здесь добавляется новая строчка когда еще есть возможность ввести несколько символов в последней строке. Немножко не подходит, а можно ли как-нибудь сделать с тем кодом который предложил Octane ? |
Цитата:
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| Часовой пояс GMT +3, время: 00:42. |