kensaku-2
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テキストエリア内検索・移動サンプル（改善版）</title>
<style>
body { font-family: sans-serif; padding: 1em; }
.container { display: flex; flex-direction: column; gap: 10px; }
.controls { display: flex; align-items: center; gap: 10px; }
textarea {
width: 500px;
height: 200px;
font-size: 16px; /* 計算のためピクセル指定を推奨 */
line-height: 1.5; /* 行の高さを設定 */
}
input[type="text"] { padding: 5px; }
input[type="button"] { padding: 5px 10px; cursor: pointer; }
</style>
</head>
<body>
<h1>テキストエリア内検索 & ジャンプ機能（改善版）</h1>
<div class="container">
<div class="controls">
<input type="text" id="searchInput" placeholder="検索キーワード">
<input type="button" value="次を検索" onclick="findNext()">
</div>
<textarea id="mainTextarea"></textarea>
</div>
<script>
const textarea = document.getElementById('mainTextarea');
const searchInput = document.getElementById('searchInput');
let lastFoundIndex = -1;
let lastKeyword = '';
// テキストエリアに例文を5回�}入
const sampleText = "このテキストエリアは、長文の入力が可能です。\nJavaScriptを使うことで、様々な便利機能を追加できます。\n例えば、このように検索�{タンを押すと、指定したキーワードの場所までカーソルがジャンプします。\nもう一度「次を検索」�{タンを押すと、次の「キーワード」に移動します。\nJavaScriptの可能性は無限大です。\nぜひ、このサンプルを改造して、あなただけの機能を作ってみてください。\n最後のキーワードはこちらです。\n\n";
textarea.value = sampleText.repeat(5);
function findNext() {
const keyword = searchInput.value;
if (!keyword) {
alert('検索キーワードを入力してください。');
return;
}
if (keyword !== lastKeyword) {
lastFoundIndex = -1;
lastKeyword = keyword;
}
const foundIndex = textarea.value.indexOf(keyword, lastFoundIndex + 1);
if (foundIndex !== -1) {
lastFoundIndex = foundIndex;
// --- ここからがスクロール処理の改善点 ---
// 1. CSSから行の高さを取得
const style = window.getComputedStyle(textarea);
const lineHeight = parseFloat(style.lineHeight);
// 2. 見つかった位置までのテキストを取得し、行数を数える
const textToFound = textarea.value.substring(0, foundIndex);
const lineCount = textToFound.split('\n').length;
// 3. スクロール位置を計算して設定
// (行数 - 1) * 行の高さ で、その行の開始位置のピクセル値が求まる
textarea.scrollTop = (lineCount - 1) * lineHeight;
// --- ここまで ---
// 選択範囲の設定とフォーカス
textarea.focus();
textarea.setSelectionRange(foundIndex, foundIndex + keyword.length);
} else {
alert('これ以上見つかりません。先頭から再度検索します。');
lastFoundIndex = -1;
}
}
</script>
</body>
</html>
使用変数
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テキストエリア内検索・移動サンプル（改善版）</title>
<style>
body { font-family: sans-serif; padding: 1em; }
.container { display: flex; flex-direction: column; gap: 10px; }
.controls { display: flex; align-items: center; gap: 10px; }
textarea {
width: 500px;
height: 200px;
font-size: 16px; /* 計算のためピクセル指定を推奨 */
line-height: 1.5; /* 行の高さを設定 */
}
input[type="text"] { padding: 5px; }
input[type="button"] { padding: 5px 10px; cursor: pointer; }
</style>
</head>
<body>
<h1>テキストエリア内検索 & ジャンプ機能（改善版）</h1>
<div class="container">
<div class="controls">
<input type="text" id="searchInput" placeholder="検索キーワード">
<input type="button" value="次を検索" onclick="findNext()">
</div>
<textarea id="mainTextarea"></textarea>
</div>
<script>
const textarea = document.getElementById('mainTextarea');
const searchInput = document.getElementById('searchInput');
let lastFoundIndex = -1;
let lastKeyword = '';
// テキストエリアに例文を5回�}入
const sampleText = "このテキストエリアは、長文の入力が可能です。\nJavaScriptを使うことで、様々な便利機能を追加できます。\n例えば、このように検索�{タンを押すと、指定したキーワードの場所までカーソルがジャンプします。\nもう一度「次を検索」�{タンを押すと、次の「キーワード」に移動します。\nJavaScriptの可能性は無限大です。\nぜひ、このサンプルを改造して、あなただけの機能を作ってみてください。\n最後のキーワードはこちらです。\n\n";
textarea.value = sampleText.repeat(5);
function findNext() {
const keyword = searchInput.value;
if (!keyword) {
alert('検索キーワードを入力してください。');
return;
}
if (keyword !== lastKeyword) {
lastFoundIndex = -1;
lastKeyword = keyword;
}
const foundIndex = textarea.value.indexOf(keyword, lastFoundIndex + 1);
if (foundIndex !== -1) {
lastFoundIndex = foundIndex;
// --- ここからがスクロール処理の改善点 ---
// 1. CSSから行の高さを取得
const style = window.getComputedStyle(textarea);
const lineHeight = parseFloat(style.lineHeight);
// 2. 見つかった位置までのテキストを取得し、行数を数える
const textToFound = textarea.value.substring(0, foundIndex);
const lineCount = textToFound.split('\n').length;
// 3. スクロール位置を計算して設定
// (行数 - 1) * 行の高さ で、その行の開始位置のピクセル値が求まる
textarea.scrollTop = (lineCount - 1) * lineHeight;
// --- ここまで ---
// 選択範囲の設定とフォーカス
textarea.focus();
textarea.setSelectionRange(foundIndex, foundIndex + keyword.length);
} else {
alert('これ以上見つかりません。先頭から再度検索します。');
lastFoundIndex = -1;
}
}
</script>
</body>
</html>
使用変数
| charset | |
| class | |
| findNext -------( Function ) | |
| foundIndex | |
| id | |
| keyword | |
| lang | |
| lastFoundIndex | |
| lastKeyword | |
| lineCount | |
| lineHeight | |
| onclick | |
| placeholder | |
| sampleText | |
| scrollTop | |
| searchInput | |
| style | |
| textarea | |
| textToFound | |
| type | |
| value |