6

属性 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 できるはずです。

行 = 2

私は試しました:
$('#myarea').html().split("\n").length
$('#myarea').val().split("< br>").length
$( '#myarea').val().split("\r").length
さらにいくつかの組み合わせ...

しかし、どれも機能しません。各文字を数えて改行を作成するスクリプトを書かなくても、私が求めていることは可能ですか? これが「自動的に」起こることを望んでいました...

これが不可能な場合、サーバーは新しい行を解釈 (検索) できるのに、私はできないのはなぜですか?

ありがとう！

4

2 に答える 2

2

この値を取得するツールは組み込まれていないようです。しかし、私たちはそれを計算することができます。textarea の line-height が既知の値であると仮定します (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/

アップデート

私のコードでChromeのバグを見つけました。テキストエリアの右側に表示されるスクロールバーを考慮していませんでした。これにより、間違った行数が計算されることがあります。ただし、Firefoxでは魅力的に機能します。この問題を解決するには、スクロールバーの幅の差を計算し、それに応じてテキストエリアの幅を調整する必要があります:

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

更新された例http://jsfiddle.net/J5UpF/3/

更新 2

Chrome に新たな恐ろしいバグが発見されました! 属性を使用placeholderすると、Chrome はプレースホルダー テキストの行数を計算します。回避策は簡単です。テキストエリアにデータを入力したときにプレースホルダー属性をバックアップし、データがクリアされたときに復元するだけです。

更新された例http://jsfiddle.net/J5UpF/4/

于 2013-05-26T14:28:44.933 に答える
-1

送信ボタンonClickにjqueryをバインドしてから、

$('#myarea').val().split("\n").length
于 2013-05-26T13:41:36.647 に答える