如何使用Prototype自动调整textarea？
Mik*_*ike 115 html javascript css textarea prototypejs
我正在为我工作的公司开发一个内部销售应用程序,我有一个允许用户更改交付地址的表单.
现在我认为它会看起来更好,如果我用于主要地址细节的textarea只占用其中文本的区域,并在文本被更改时自动调整大小.
这是目前的截图.
有任何想法吗？
@克里斯
一个好点,但有理由我希望它调整大小.我希望它占用的区域是其中包含的信息区域.正如你在屏幕截图中看到的那样,如果我有一个固定的textarea,它会占用相当大的垂直空间.
我可以减少字体,但我需要地址大而且可读.现在我可以减小文本区域的大小,但是我遇到的问题是地址行需要3或4行(一行需要5行).需要用户使用滚动条是一个主要的禁忌.
我想我应该更具体一点.我正在垂直调整大小,宽度无关紧要.发生这种情况的唯一问题是,当窗口宽度太小时,ISO编号(大"1")会被推到地址下(正如您在屏幕截图中看到的那样).
这不是要有一个gimick; 它是关于有一个用户可以编辑的文本字段,它不会占用不必要的空间,但会显示其中的所有文本.
虽然如果有人想出另一种解决问题的方法,我也会对此持开放态度.
我已经修改了一些代码,因为它的行为有点奇怪.我将其更改为在keyup上激活,因为它不会考虑刚刚输入的字符.
resizeIt = function() {
var str = $('iso_address').value;
var cols = $('iso_address').cols;
var linecount = 0;
$A(str.split("\n")).each(function(l) {
linecount += 1 + Math.floor(l.length / cols); // Take into account long lines
})
$('iso_address').rows = linecount;
};
Ori*_*rds 74
当你在人们的墙上写字时,Facebook会这样做,但只能垂直调整大小.
由于自动换行,长行等等,水平调整大小让我觉得一团糟,但垂直调整大小似乎非常安全和美观.
我所知道的Facebook使用新手都没有提到任何关于它的事情或者被混淆了.我用这个作为轶事证据来说"继续前进,实施它".
一些JavaScript代码,使用Prototype(因为这是我熟悉的):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script language="javascript">
google.load('prototype', '1.6.0.2');
</script>
</head>
<body>
<textarea id="text-area" rows="1" cols="50"></textarea>
<script type="text/javascript" language="javascript">
resizeIt = function() {
var str = $('text-area').value;
var cols = $('text-area').cols;
var linecount = 0;
$A(str.split("\n")).each( function(l) {
linecount += Math.ceil( l.length / cols ); // Take into account long lines
})
$('text-area').rows = linecount + 1;
};
// You could attach to keyUp, etc. if keydown doesn't work
Event.observe('text-area', 'keydown', resizeIt );
resizeIt(); //Initial on load
</script>
</body>
</html>
PS:显然这个JavaScript代码非常天真并且没有经过良好测试,你可能不想在带有小说的文本框中使用它,但是你得到了一般的想法.
- 这假定浏览器在任何字符处中断,这是不正确的.试试`<textarea cols ='5'> 0 12345 12345 0 </ textarea>`.(我写了一个几乎相同的实现,直到使用它一个月后才发现它.)它也失败了空行. (2认同)
Jan*_*sky 63
对其中一些答案的一个改进是让CSS完成更多的工作.
基本路线似乎是:
- 创建一个容器元素来保存
textarea和隐藏div - 使用Javascript,保持其
textarea内容与div's 同步 - 让浏览器完成计算div高度的工作
- 因为浏览器处理隐藏的渲染/大小调整
div,所以我们避免明确设置textarea高度.
document.addEventListener('DOMContentLoaded', () => {
textArea.addEventListener('change', autosize, false)
textArea.addEventListener('keydown', autosize, false)
textArea.addEventListener('keyup', autosize, false)
autosize()
}, false)
function autosize() {
// Copy textarea contents to div browser will calculate correct height
// of copy, which will make overall container taller, which will make
// textarea taller.
textCopy.innerHTML = textArea.value.replace(/\n/g, '<br/>')
}html, body, textarea {
font-family: sans-serif;
font-size: 14px;
}
.textarea-container {
position: relative;
}
.textarea-container > div, .textarea-container > textarea {
word-wrap: break-word; /* make sure the div and the textarea wrap words in the same way */
box-sizing: border-box;
padding: 2px;
width: 100%;
}
.textarea-container > textarea {
overflow: hidden;
position: absolute;
height: 100%;
}
.textarea-container > div {
padding-bottom: 1.5em; /* A bit more than one additional line of text. */
visibility: hidden;
}<div class="textarea-container">
<textarea id="textArea"></textarea>
<div id="textCopy"></div>
</div>- 这是一个很棒的解决方案!唯一需要注意的是,不支持大小调整(IE <7)的浏览器无法正确计算宽度,因此你会失去一些准确性,但如果你最后留下一条线的空间,你应该还好.绝对喜欢它的简单性. (4认同)
- 我自由地将这个解决方案作为独立的,易于使用的jQuery插件实现,不需要标记或样式.http://xion.io/jQuery.xarea/万一有人可以使用它:) (4认同)
- 将textCopy设置为hidden仍允许隐藏的div占用标记中的空间,以便textCopy内容变大,最终会在页面的整个长度上获得一个滚动条... (2认同)
Sho*_*og9 38
这是另一种自动调整textarea的技术.
- 使用像素高度而不是行高:如果使用比例字体,则更准确地处理换行.
- 接受ID或元素作为输入
- 接受可选的最大高度参数 - 如果您不希望文本区域超出一定大小(将其全部保留在屏幕上,避免破坏布局等),则非常有用.
- 在Firefox 3和Internet Explorer 6上测试过
代码:( 普通的香草JavaScript)
function FitToContent(id, maxHeight)
{
var text = id && id.style ? id : document.getElementById(id);
if (!text)
return;
/* Accounts for rows being deleted, pixel value may need adjusting */
if (text.clientHeight == text.scrollHeight) {
text.style.height = "30px";
}
var adjustedHeight = text.clientHeight;
if (!maxHeight || maxHeight > adjustedHeight)
{
adjustedHeight = Math.max(text.scrollHeight, adjustedHeight);
if (maxHeight)
adjustedHeight = Math.min(maxHeight, adjustedHeight);
if (adjustedHeight > text.clientHeight)
text.style.height = adjustedHeight + "px";
}
}
演示:( 使用jQuery,我正在输入的textarea上的目标 - 如果你安装了Firebug,将两个样本粘贴到控制台并在此页面上测试)
$("#post-text").keyup(function()
{
FitToContent(this, document.documentElement.clientHeight)
});
Edu*_*uca 13
可能是最短的解决方案:
jQuery(document).ready(function(){
jQuery("#textArea").on("keydown keyup", function(){
this.style.height = "1px";
this.style.height = (this.scrollHeight) + "px";
});
});
这样你就不需要任何隐藏的div或类似的东西了.
注意:您可能需要使用,this.style.height = (this.scrollHeight) + "px";具体取决于您如何设置textarea的样式(行高,填充和那种东西).
- 将textarea overflow属性设置为"hidden"以避免滚动条闪烁. (2认同)
这是一个Prototype版本,用于调整文本区域的大小,该区域不依赖于textarea中的列数.这是一种优秀的技术,因为它允许您通过CSS控制文本区域以及具有可变宽度textarea.此外,此版本显示剩余的字符数.虽然没有要求,但它是一个非常有用的功能,如果不需要,很容易删除.
//inspired by: http://github.com/jaz303/jquery-grab-bag/blob/63d7e445b09698272b2923cb081878fd145b5e3d/javascripts/jquery.autogrow-textarea.js
if (window.Widget == undefined) window.Widget = {};
Widget.Textarea = Class.create({
initialize: function(textarea, options)
{
this.textarea = $(textarea);
this.options = $H({
'min_height' : 30,
'max_length' : 400
}).update(options);
this.textarea.observe('keyup', this.refresh.bind(this));
this._shadow = new Element('div').setStyle({
lineHeight : this.textarea.getStyle('lineHeight'),
fontSize : this.textarea.getStyle('fontSize'),
fontFamily : this.textarea.getStyle('fontFamily'),
position : 'absolute',
top: '-10000px',
left: '-10000px',
width: this.textarea.getWidth() + 'px'
});
this.textarea.insert({ after: this._shadow });
this._remainingCharacters = new Element('p').addClassName('remainingCharacters');
this.textarea.insert({after: this._remainingCharacters});
this.refresh();
},
refresh: function()
{
this._shadow.update($F(this.textarea).replace(/\n/g, '<br/>'));
this.textarea.setStyle({
height: Math.max(parseInt(this._shadow.getHeight()) + parseInt(this.textarea.getStyle('lineHeight').replace('px', '')), this.options.get('min_height')) + 'px'
});
var remaining = this.options.get('max_length') - $F(this.textarea).length;
this._remainingCharacters.update(Math.abs(remaining) + ' characters ' + (remaining > 0 ? 'remaining' : 'over the limit'));
}
});
通过调用创建小部件new Widget.Textarea('element_id').可以通过将它们作为对象传递来覆盖默认选项,例如new Widget.Textarea('element_id', { max_length: 600, min_height: 50}).如果要为页面上的所有textareas创建它,请执行以下操作:
Event.observe(window, 'load', function() {
$$('textarea').each(function(textarea) {
new Widget.Textarea(textarea);
});
});
这是一个解决方案JQuery:
$(document).ready(function() {
var $abc = $("#abc");
$abc.css("height", $abc.attr("scrollHeight"));
})
abc是一个teaxtarea.
小智 5
请查看以下链接:http: //james.padolsey.com/javascript/jquery-plugin-autoresize/
$(document).ready(function () {
$('.ExpandableTextCSS').autoResize({
// On resize:
onResize: function () {
$(this).css({ opacity: 0.8 });
},
// After resize:
animateCallback: function () {
$(this).css({ opacity: 1 });
},
// Quite slow animation:
animateDuration: 300,
// More extra space:
extraSpace:20,
//Textarea height limit
limit:10
});
});