自動拡張可能なテキストエリアが正しく動作しない

-1

出力をフォーマットされた方法で表示するために、jspページに自動拡張可能なtextareaを使用しました。表示するコンテンツの高さに合わせてサイズが大きくなることが期待されます。しかし、それはうまくいかないようでした。自動拡張可能なテキストエリアが正しく動作しない

<body onload="init();"> 
     <div id="mainDivContainer"> 
      <div id="insideMainDivContainer"> 
       <a href="InputTest02.html">Back</a> 
       <div> 
        <table align="center"> 
       <thead> 
        <tr> 
         <th>Text</th> 
        </tr> 
       </thead> 

        <% 
         List<TextBean> list = TextDAO.getData(); 
         for (TextBean bean : list) { 
        %> 
        <br/> 
        <tbody> 
        <tr> 
        <textarea id="text" name="qa" form="form" rows="10" cols="60"><%=bean.getText() %></textarea> 
        </tr> 
        </tbody> 
        <% 
         } 
        %> 

      </table></div> 
      </div>  
     </div> 
    </body>

、これが成長可能なテキスト領域のジャバスクリプトです： - - ：ここに私のJSPは次のとおりです。

テキストエリアがで拡大されていません - 2つの問題があります。

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(); 
}

最初の要素を除くサイズ。

最初の要素のテキストが強調表示されます。ここにそれのスクリーンショットです： - 。ここで何が間違っているのか分かりません。すべての助けを歓迎します。

出典

2016-04-18 Gaurav Mahindra

ちょうどあなたのテキストエリアにCSSスタイルのこの行を追加します。

textarea { resize: both; }

あなたがresizeablityの方向を制限したい場合は、単にresizeプロパティ編集：私はそれを試してみました

textarea { resize: vertical; } 

textarea { resize: horizontal; }

出典

2016-04-18 08:37:12

を。動いていない。 –

あなたのブラウザは、このcssプロパティでサイズ変更アイコンがテキストボックスの右下に表示されない限り、CSS3をサポートしていないと思います –

これはIE [link]（http://www.w3schools.com/cssref）ではサポートされていません/css3_pr_resize.asp） –

自動拡張可能なテキストエリアが正しく動作しない

答えて

関連する問題