BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] Prototypeを使ってtextareaを自動サイズ調整するには？

2022-07-24 14:05:57

質問

現在、勤めている会社の社内販売用アプリケーションを作成しているのですが、ユーザーが配送先を変更するためのフォームを用意しました。

今、私は、メインの住所の詳細のために使用しているテキストエリアが、その中のテキストの領域を占有し、テキストが変更された場合に自動的にリサイズされれば、もっときれいに見えると思います。

これが現在のスクリーンショットです。

何かアイデアはありますか？

クリス

良いポイントですが、リサイズしてほしい理由があります。私は、テキストエリアが占める面積を、その中に含まれる情報の面積にしたいのです。スクリーンショットにあるように、固定されたテキストエリアがある場合、垂直方向のかなりのスペースを占めます。

フォントを小さくすることもできますが、アドレスは大きく読みやすくする必要があります。テキスト エリアを小さくすることはできますが、住所の行が 3 行も 4 行も (1 行は 5 行も) 必要な人がいて、問題が発生します。ユーザーにスクロールバーを使用させる必要があるのは、大きな問題です。

私はもう少し具体的に説明する必要があると思います。私は垂直方向のリサイズが目的であり、幅はそれほど重要ではありません。それで起こる唯一の問題は、ISO 番号 (大きな "1") が、ウィンドウ幅が小さすぎる場合 (スクリーンショットでわかるように) アドレスの下に押し込まれることです。

ギミックを持つことではなく、ユーザーが編集できるテキスト フィールドを持ち、不必要なスペースを取らず、その中のすべてのテキストを表示することなのです。

もし誰かがこの問題にアプローチする別の方法を思いついたら、私はそれを受け入れることができます。

少し奇妙な動作をしていたので、コードを少し修正しました。今入力された文字を考慮しないので、キーアップ時にアクティブにするように変更しました。 

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では、人の壁に書き込むと、縦方向にのみリサイズされます。

水平方向のリサイズは、折り返しや長い行のために混乱するように思えますが、垂直方向のリサイズはかなり安全で良いように思えます。

私の知っているFacebook利用初心者は、誰一人としてそれについて言及したり、混乱したことはありません。私はこれを、「どうぞ、実装してください」と言うための逸話的証拠とします。

これを行うためのいくつかの JavaScript コードは プロトタイプ (を使っています（私がよく知っているのはこれなので）。 

<!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コードは非常に素朴でよくテストされていませんし、おそらく小説を含むテキストボックスには使いたくありません。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します