私たちが書いているとおりにテキストエリアを自動展開する方法

私が書き込むときにテキストエリアを自動拡張する方法はありますか？私たちが書いているとおりにテキストエリアを自動展開する方法

これは私のコードです：

<script type="text/javascript"> 
       function clearContents(element) { 
        element.value = ''; 
       } 
       function updateContents(element) { 
        element.value = "What's on your mind?"; 
       } 
      </script> 
      <h1>New status</h1> 
      <form action="index.php" method="post" name="new_message"> 
       <textarea id="message" onFocus="clearContents(this);" onKeyPress="catchEnter(this);">What's on your mind?</textarea> 
       <input type="button" value="Post"> 
      </form>

出典

2011-08-16 Vemund

私はelastic textbox from Unwrongestを使用していると、それは素晴らしいプラグインです。それだ

$('#TextAreaId').elastic();

：

はただ単にこれでプラグインを呼び出して、プラグインが含まれる、と。

チェックアウトここにデモ：http://jsfiddle.net/janjarfalk/r3Ekw/

3つの段階でこれを実現する方法：

ステップ1：あなたのhtmlであなたの<head>にこれを追加します。

http://jquery-elastic.googlecode.com/svn/trunk/jquery.elastic.source.js

ステップ2：これをあなたのhtmlファイルに、</body>の直前に追加してください。

$('textarea').elastic();

ステップ3：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

あなたが行われた：ステップ1からあなたのコードの上に次の行を追加します。それは、ステップ2の後に動作しない場合のみ、この手順を使用します。すでにjQueryのを持っている場合は、次にバムをステップ3.

出典

2011-08-16 11:46:19 LocustHorde

これにはJQueryが必要です。 – LocustHorde

<textarea onkeyup="textarea(this);"></textarea> 

<script> 
function textarea(box){ 
box.style.height = box.scrollHeight+'px'; 
} 
</script>

をスキップ！成長しているテキストエリアがあります。ボーダーとパディングを考慮する必要があるかもしれません。その機能に含まれるものを含む。

出典

2013-12-21 20:45:04

このソリューションは、テキストボックスを縮小する必要がない場合にのみ機能します。 –

私たちが書いているとおりにテキストエリアを自動展開する方法

答えて

関連する問題