2010-12-23 18 views
2

可能性の重複:私は行数に基づいてテキスト領域の高さを変更するにはどうすればよい
Autosizing textarea using prototypeの変更高さ

ユーザーが入力するテキストの数

ユーザーがテキストエリア内のテキストを複数のテキスト行に変更した場合、テキストエリアは、行数に合わせて高さを変更するのではなく、スクロールバーを表示します。行の高さに一致するように "32" を調整

+2

@FelixKling OPがプロトタイプを使用していると仮定した場合にのみ、彼は言及しませんでした。 – Chad

答えて

1
<textarea> 
This is the default text that will be displayed in the browser. When you change this text and add more lines to it the browser will not change the height of the textarea that this text is in rather it will add a scroll bar, which is not what I want. 
<textarea> 
<textarea onkeyup="autoSize(this);"></textarea> 

function autoSize(ele) 
{ 
    ele.style.height = 'auto'; 
    var newHeight = (ele.scrollHeight > 32 ? ele.scrollHeight : 32); 
    ele.style.height = newHeight.toString() + 'px'; 
} 

課題として残されています。

+0

動作していません:http://jsfiddle.net/MYrG2/ –

+0

スクリプトではなくJSFiddleで問題が発生しました。 Chromeから:「安全でないJavaScriptがURL http://jsfiddle.net/MYrG2/のフレームにアクセスしようとしました。URLがhttp://fiddle.jshell.net/MYrG2/show/のフレームから、ドメイン、プロトコル、ポートが一致している必要があります。クロスサイトスクリプティングのエラー、奇妙な方法。 – JURU

+1

おっと、小さな追加:この問題をWebkitで修正するには、 "overflow-y:hidden"をテキストエリアスタイリングに追加する必要があります。 – JURU

関連する問題