8

このように流れるコンテンツを含むテキストエリアがあるとします

     –––––––––––––––––––––––––––
    | これはいくつかのテキストです。
    | このようにラップします。|
     –––––––––––––––––––––––––––

text-cursorがtextareaの最初の行にあるかどうかをどのように判断できますか？

明らかに\n、最初の改行の前にカーソルが表示されるかどうかを確認したい場合は、改行文字（）のチェックは機能しますが、「ソフト」改行のテストはより難しいようです。

これは、で実験するためのサンプルjsFiddleです。

私はまだ戦略を考え出していませんが、カーソル位置までテキストを複製されたテキストエリア（またはdiv）にコピーし、必要なだけ幅を作成して折り返さないようにする必要があると思われます。複製された領域の幅が元の領域よりも小さい場合、カーソルは最初の行にある必要があるように見えます。より単純なオプション、よりエレガントなもの、または（何よりも）既存の十分にテストされたソリューションがあるかもしれません。

ターゲットブラウザはWebkit（Chrome / Safari）とFirefoxです。つまり、現時点ではIEの互換性は問題ではありません（それが違いを生む場合）。

読んでくれてありがとう。

編集：マウスカーソルではなく、テキストカレットの行番号を探しています。

falsarellaは優れた回答をし、質問のあいまいさを浮き彫りにしました。私が探しているのは、テキストカーソル（「caret」の方が良い単語かもしれません）が最初の行にあるかどうかです。質問とjsFiddleを反映するように更新しました。

4

2 に答える 2

4

私が知っている「作業方法」は 1 つだけです。このメソッドでは、textareaの「cols」属性を使用する必要があります。簡単に言うと、列を必要な幅に設定し、カーソル位置を分割して床に置き、1 未満かどうかを確認します。つまり、1 行目です。

コード例を示すだけで説明が簡単になるかもしれません。

$("textarea").live("keyup", function(e) {
    if ($("textarea").attr("cols")) {
        var cols = parseInt($("textarea").attr("cols")),
            curPos = $('textarea').prop("selectionStart"),
            result = Math.floor(curPos/cols);
        var msg = (result < 1) ? "Cursor is on the First line!" : "Cursor is on the line #"+(result+1);
        console.log($("p").text(msg).text());
    };
});​

ただし、カーソルが単に行 1 の最後にある場合でも、列サイズによっては「行 2」と表示されることがあるため、有線の計算が必要になる場合があります (任意の文字が行 2 にドロップされるため、技術的には正しいと言えます)。

jsフィドル

于 2012-08-07T18:42:26.820 に答える
3

15が行の高さであるため、これは機能します（firefoxでテスト済み）：

http://jsfiddle.net/h46jh/12/

$("textarea").click(function (evt) {
  cursor_position = evt.pageY - $('textarea').offset().top;
  if (cursor_position <= 15) {
    alert("first line");
  } else {
    alert("other line");
  }
});

クレジット:

要素に相対的なマウスの位置を見つける

于 2012-08-07T17:59:00.913 に答える