Noh | エンジニア向け情報共有コミュニティ
Signup / Login

textareaのスクロール位置取得について

y
yosi2024/02/02 17:41

スクロール可能なtextareaがあります。
何行目から表示されているか取得する方法を教えてください。ただし、折り返しは1行とします。

A
Answerer AIPowered by gpt-3.5-turbo

スクロール可能なtextareaの何行目から表示されているか取得するには、以下の手順を使用できます。

  1. textarea要素を取得します。
  2. textareaのscrollTopプロパティの値を取得します。この値は、テキストエリアが上方向にスクロールされたピクセル数を表します。
  3. textareaのlineHeightプロパティの値を取得します。これは、一行の高さをピクセル単位で表します。
  4. scrollTopをlineHeightで割り、小数点以下を切り捨てます。これにより、何行目から表示されているかがわかります。

以下は、JavaScriptを使用した例です。

var textarea = document.getElementById('myTextarea'); var scrollTop = textarea.scrollTop; var lineHeight = parseFloat(getComputedStyle(textarea).lineHeight); var lineNumber = Math.floor(scrollTop / lineHeight) + 1; console.log('表示されている行数:', lineNumber);

この例では、idが"myTextarea"であるtextarea要素を取得し、そのscrollTopプロパティとlineHeightプロパティを使用して、表示されている行数を計算しています。最後に、計算結果をコンソールに出力しています。

y
yosi2024/02/02 17:43

この方法で取得するlineHeightは折り返しも1行とカウントしてしまう……

y
yosi2024/02/02 17:45

textareaのwrapをhardにすると送信内容に折り返しを反映できると思います。実際に送信することなく、折り返しを反映した文字列をjsで取得できますか。

y
yosi2024/02/02 17:46

textareaのwrapをhardにすると送信内容に折り返しを反映できると思います。実際に送信することなく、折り返しを反映した文字列をjsで取得できますか。

A
Answerer AIPowered by gpt-3.5-turbo

はい、可能です。JavaScriptを使用して、textarea要素の値を取得すると、折り返されたテキストを含む文字列を取得できます。

以下は例です:

// textarea要素の値を取得する const textarea = document.getElementById("myTextarea"); const value = textarea.value; // 取得した値をコンソールに表示する console.log(value);

この方法で取得するvalue変数には、textarea要素の中に入力されたテキストが折り返しを反映した状態で含まれます。

y
yosi2024/02/02 17:50

jsでtextareaの折り返しを改行に変換した文字列とすることはできますか

A
Answerer AIPowered by gpt-3.5-turbo

はい、JavaScriptを使用してtextarea内のテキストの折り返しを改行に変換することができます。

以下は例です:

// textarea要素の値を取得する const textarea = document.getElementById("myTextarea"); const value = textarea.value; // 折り返しを改行に変換する const convertedValue = value.replace(/\n/g, "\n"); // 変換された値をコンソールに表示する console.log(convertedValue);

この例では、value変数に含まれるテキスト内の全ての\n(折り返し)を\n(改行)に置換しています。convertedValue変数には、折り返しを改行に変換したテキストが含まれます。

y
yosi2024/02/02 18:05

上の回答はは動作するはずもなく

y
yosi2024/02/02 18:05

折り返し位置を取得するにはiframe使って頑張るしかなさそう?

https://stackoverflow.com/questions/2140573/html-textarea-use-javascript-to-get-wrapped-text
コメントするにはログインが必要です