使用Prototype自动调整textarea [英] Autosizing textarea using Prototype

问题描述

我目前正在为我工​​作的公司开发一个内部销售应用程序，并且我有一个允许用户更改收货地址的表单。

现在我认为它会看起来更好，如果textarea我使用的主要地址的详细信息只是占用文本的区域，并自动调整大小如果文本更改。

这是目前的屏幕截图。

有任何想法吗？

---

@Chris

一个好点，但有理由我希望它调整大小。我想要它占用的区域是其中包含的信息的区域。你可以在屏幕截图中看到，如果我有一个固定的文本区域，它占据了一个公平的垂直空间。

我可以减少字体，但我需要地址大而可读。现在我可以减少文本区域的大小，但是我有问题的人有地址线，需要3或4（一个5）行。需要让用户使用滚动条是一个主要的no-no。

我想我应该更具体一些。我在垂直调整大小后，宽度没有那么重要。发生的唯一问题是当窗口宽度太小（如截图所示）时，ISO号（大的1）被推到地址下。

这不是有一个g头;它是关于有一个文本字段，用户可以编辑，不会占用不必要的空间，但会显示其中的所有文本。

虽然如果有人提出了另一个

---

我已经修改了一些代码，因为它是表现有点奇怪。我改变它在keyup上激活，因为它不会考虑刚输入的字符。

  resizeIt = function （）{
 var str = $（'iso_address'）。value; 
 var cols = $（'iso_address'）。cols; 
 var linecount = 0; 
 
 $ A（str.split（\\\
））每个（function（l）{
 linecount + = 1 + Math.floor（l.length / cols）; //考虑长行
}）
 
 $（'iso_address'）。rows = linecount; 
};当你在人们的墙上写信时，Facebook会这样做，你可以在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-arearows =1cols =50>< / textarea> 
 
< script type =text / javascriptlanguage =javascript> 
 resizeIt = function（）{
 var str = $（'text-area'）。value; 
 var cols = $（'text-area'）。cols; 
 
 var linecount = 0; 
 $ A（str.split（\\\
））。each（function（l）{
 linecount + = Math.ceil（l.length / cols）; //考虑到long lines 
}）
 $（'text-area'）。rows = linecount + 1; 
}; 
 
 //如果keydown不起作用，你可以附加到keyUp等。
 Event.observe（'text-area'，'keydown'，resizeIt）; 
 
 resizeIt（）; //初始化加载
< / script> 
< / body> 
< / html> 
  
 
 
 PS：显然，这个JavaScript代码非常幼稚，测试不够，你可能不想在其中包含小说的文本框中使用它，但你得到的一般想法。
 
I'm currently working on an internal sales application for the company I work for, and I've got a form that allows the user to change the delivery address.

Now I think it would look much nicer, if the textarea I'm using for the main address details would just take up the area of the text in it, and automatically resize if the text was changed.

Here's a screenshot of it currently.



Any ideas?



@Chris

A good point, but there are reasons I want it to resize. I want the area it takes up to be the area of the information contained in it. As you can see in the screen shot, if I have a fixed textarea, it takes up a fair wack of vertical space.

I can reduce the font, but I need address to be large and readable. Now I can reduce the size of the text area, but then I have problems with people who have an address line that takes 3 or 4 (one takes 5) lines. Needing to have the user use a scrollbar is a major no-no.

I guess I should be a bit more specific. I'm after vertical resizing, and the width doesn't matter as much. The only problem that happens with that, is the ISO number (the large "1") gets pushed under the address when the window width is too small (as you can see on the screenshot).

It's not about having a gimick; it's about having a text field the user can edit that won't take up unnecessary space, but will show all the text in it.

Though if someone comes up with another way to approach the problem I'm open to that too.



I've modified the code a little because it was acting a little odd. I changed it to activate on keyup, because it wouldn't take into consideration the character that was just typed.
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;
};

解决方案
Facebook does it, when you write on people's walls, but only resizes vertically.

Horizontal resize strikes me as being a mess, due to word-wrap, long lines, and so on, but vertical resize seems to be pretty safe and nice.

None of the Facebook-using-newbies I know have ever mentioned anything about it or been confused. I'd use this as anecdotal evidence to say 'go ahead, implement it'.

Some JavaScript code to do it, using Prototype (because that's what I'm familiar with):
<!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: Obviously this JavaScript code is very naive and not well tested, and you probably don't want to use it on textboxes with novels in them, but you get the general idea.

                        
这篇关于使用Prototype自动调整textarea的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！