Создание текстового поля с автоматическим изменением размера
У меня работает (Firefox .js 3.6 / 4.0 и Chrome 10/11):
var observe;
if (window.attachEvent) {
observe = function (element, event, handler) {
element.attachEvent('on'+event, handler);
};
}
else {
observe = function (element, event, handler) {
element.addEventListener(event, handler, false);
};
}
function init () {
var text = document.getElementById('text');
function resize () {
text.style.height = 'auto';
text.style.height = text.scrollHeight+'px';
}
/* 0-timeout to get the already changed text */
function delayedResize () {
window.setTimeout(resize, 0);
}
observe(text, 'change', resize);
observe(text, 'cut', delayedResize);
observe(text, 'paste', delayedResize);
observe(text, 'drop', delayedResize);
observe(text, 'keydown', delayedResize);
text.focus();
text.select();
resize();
}
textarea {
border: 0 none white;
overflow: hidden;
padding: 0;
outline: none;
background-color: #D0D0D0;
}
Если хотите, попробуйте на jsfiddle
Он html-tag начинается с одной строки resizing и увеличивается только на html5 необходимое количество. Это ecmascript нормально для одного textarea
, но html-tag я хотел написать что-нибудь, где js у меня было бы много-много-много ecmascript таких textarea
(примерно столько html-tag же, сколько строк в большом ecmascript текстовом документе). В этом html случае это действительно resizing медленно. (В Firefox это vanillajs безумно медленно.) Так что javascript-library мне действительно нужен подход, использующий textarea чистый CSS. Это было бы возможно js с contenteditable
, но я хочу, чтобы это span был только открытый текст.
javascript
html
resize
height
textarea
Создание текстового поля с автоматическим изменением размера
Мы используем файлы cookies для улучшения работы сайта. Оставаясь на нашем сайте, вы соглашаетесь с условиями использования файлов cookies. Чтобы ознакомиться с нашими Положениями о конфиденциальности и об использовании файлов cookie, нажмите здесь.