フォームを送信する前に、テキストエリアで改行を読みますか？

Question

属性wrap = "hard"のテキストエリアがあります。つまり、サーバーに送信した後で改行（改行）を取得できるはずです。しかし、私がしたいのは、の前に提出の新しい行を作ることです。

なぜですか？現在表示されている行を数えたいからです。そして今、私はキャリッジリターンの行について話していません。私は、テキストエリアの幅（またはcols属性の設定）を制限することによって作成される行について話しています。

私は、このテキストボックスを持っている：ブラウザで

<textarea id="myarea" name="myarea" cols="35" rows="10" wrap="hard"> 
    Some example text here. Hello my name is something I should be able to blabla. 
</textarea> 

出力：
ここではいくつかの例のテキスト。こんにちは私の名前は
何か私はblablaすることができるはずです。
$（ '＃のmyarea'）HTML（）スプリット（ "\ n"）を長さ
$（ '＃のmyareaを'）：。。。私が試した

行= 2

.val（）。スプリット（ "< BR> "）。長さ
$（ '＃のmyarea'）。valを（）。スプリット（" \ rを"）。長さ
そして、さらにいくつかの組み合わせ...

しかし、何も動作しません。それぞれのキャラクターを数えて改行を作成するスクリプトを書かなければ、私は何を求めているのでしょうか？

これができないのであれば、私はできないのになぜサーバーが新しい行を解釈（見つける）できるのですか？

ありがとうございます！

Answer 1

はそう使用して、ボタンのonClickを提出します。しかし、我々はそれを計算することができます。 textareaの行の高さが既知の値であると仮定します（これはcssで明示的に定義できます）。だから、行数を計算するためのコードは次のようになります

var area = $('#myarea').get(0); 

    //save the initial height of textarea 
    var initialHeight = area.style.height; 

    //set the height to 0 so scrollHeight will always return dynamic height 
    area.style.height = '0px'; 

    //here we assume that the line-height equals to 15 
    var numberOfRows = Math.floor(area.scrollHeight/15); 

    //restore textarea height 
    area.style.height = initialHeight; 

    console.log(numberOfRows); 

の作業例http://jsfiddle.net/J5UpF/

UPDATE

をちょうど私のコードを使ってChromeのバグを考え出しました。私は、テキストエリアの右側に表示されるスクロールバーを考慮しませんでした。その結果、時々計算される線の数が間違っています。しかし、それはFirefoxの魅力のように動作します。http://jsfiddle.net/J5UpF/3/

はUPDATEがChromeで新しい素晴らしいバグが

ある2

var area = $('#myarea').get(0); 
var $area = $('#myarea'); 

//save the initial height of textarea 
var initialHeight = area.style.height; 

var scrollbarWidthInitial = area.offsetWidth - area.clientWidth; 

//set the height to 0 so scrollHeight will always return dynamic height 
area.style.height = '0px'; 

var scrollbarWidth = area.offsetWidth - area.clientWidth; 
var scrollbarWidthDiff = scrollbarWidth - scrollbarWidthInitial; 
$area.width($area.width() + scrollbarWidthDiff); 

//here we assume that the line-height equals to 15 
var numberOfRows = Math.floor(area.scrollHeight/15); 

//restore textarea height 
area.style.height = initialHeight; 
$area.width($area.width() - scrollbarWidthDiff); 

console.log(numberOfRows); 

更新例：私たちは、スクロールバーの幅の差を算出し、それに応じてテキストエリアの幅を調整する必要があり、この問題を修正するには発見された！ placeholder属性を使用すると、Chromeはプレースホルダテキストの行数を計算します。回避策は簡単です。データをテキストエリアに入力したときにプレースホルダ属性をバックアップし、データが消去されたときにプレースホルダ属性を復元するだけです。

更新例http://jsfiddle.net/J5UpF/4/

Answer 2

あなたは上のjQueryをバインドすることができ、この値を取得するためのツールにはビルドがないよう

$('#myarea').val().split("\n").length