kensaku-6
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>【検索履歴ドロップダウン】contenteditable</title>
<style>
body { font-family: sans-serif; padding: 1em; }
.container { display: flex; flex-direction: column; gap: 10px; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.editable-area {
width: 500px;
height: 200px;
border: 1px solid #767676;
padding: 8px;
overflow: auto;
font-size: 16px;
line-height: 1.5;
background-color: white;
white-space: pre-wrap;
}
.highlight {
background-color: #ff0;
border-radius: 3px;
}
#searchCounter {
font-size: 0.9em;
color: #333;
min-width: 50px;
}
input[type="text"], select, input[type="button"] {
padding: 5px;
font-size: 1em;
}
</style>
</head>
<body>
<h1>【検索履歴ドロップダウン】検索 & ジャンプ機能</h1>
<div class="container">
<div class="controls">
<input type="text" id="searchInput" placeholder="検索キーワードを入力">
<input type="button" value="検索 & 履歴追加" onclick="searchAndAddToHistory()">
<input type="button" value="次を検索" onclick="findNext(false)">
<select id="searchHistorySelect" onchange="selectFromHistory()">
<option value="" disabled selected>検索履歴...</option>
</select>
<span id="searchCounter"></span>
</div>
<div id="editor" class="editable-area" contenteditable="true"></div>
</div>
<script>
const editor = document.getElementById('editor');
const searchInput = document.getElementById('searchInput');
const historySelect = document.getElementById('searchHistorySelect');
const counterElement = document.getElementById('searchCounter');
const sampleText = "このテキストエリアは、長文の入力が可能です。\nJavaScriptを使うことで、様々な便利機能を追加できます。例えば、このように検索�{タンを押すと、指定したキーワードの場所までカーソルがジャンプします。\nもう一度「次を検索」�{タンを押すと、次の「キーワード」に移動します。JavaScriptの可能性は無限大です。\nぜひ、このサンプルを改造して、あなただけの機能を作ってみてください。\n最後のキーワードはこちらです。\n\n";
editor.innerText = sampleText.repeat(5);
let currentMatches = [];
let currentIndex = -1;
// 「検索 & 履歴追加」�{タンの機能
function searchAndAddToHistory() {
const keyword = searchInput.value;
if (!keyword.trim()) return; // 空白は無視
// 履歴に同じものがなければ追加する
let exists = false;
for (let i = 0; i < historySelect.options.length; i++) {
if (historySelect.options[i].value === keyword) {
exists = true;
break;
}
}
if (!exists) {
const newOption = document.createElement('option');
newOption.value = keyword;
newOption.text = keyword;
historySelect.appendChild(newOption);
}
// 追加した（または既にある）項目を選択状態にする
historySelect.value = keyword;
// 新しい検索を開始
findNext(true);
}
// 履歴ドロップダウンが変更されたときの機能
function selectFromHistory() {
// ドロップダウンで選んだ値をテキスト�{ックスに反映
searchInput.value = historySelect.value;
// 新しい検索を開始
findNext(true);
}
// 検索のコア機能
function findNext(isNewSearch = false) {
const keyword = searchInput.value;
if (!keyword) return;
if (isNewSearch || editor.dataset.lastKeyword !== keyword) {
removeHighlights();
editor.dataset.lastKeyword = keyword;
const regex = new RegExp(keyword, 'gi');
editor.innerHTML = editor.innerText.replace(regex, `<span class="highlight">${keyword}</span>`);
currentMatches = Array.from(editor.querySelectorAll('.highlight'));
currentIndex = -1;
}
if (currentMatches.length === 0) {
if (isNewSearch) {
alert('キーワードが見つかりませんでした。');
}
counterElement.textContent = '(0 / 0)';
return;
}
currentIndex = (currentIndex + 1) % currentMatches.length;
counterElement.textContent = `(${currentIndex + 1} / ${currentMatches.length})`;
const currentElement = currentMatches[currentIndex];
currentElement.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
currentMatches.forEach(el => el.style.backgroundColor = '#ff0');
currentElement.style.backgroundColor = '#ffa500';
}
function removeHighlights() {
if (editor.dataset.lastKeyword) {
editor.innerHTML = editor.innerText;
counterElement.textContent = '';
}
}
</script>
</body>
</html>
使用変数
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>【検索履歴ドロップダウン】contenteditable</title>
<style>
body { font-family: sans-serif; padding: 1em; }
.container { display: flex; flex-direction: column; gap: 10px; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.editable-area {
width: 500px;
height: 200px;
border: 1px solid #767676;
padding: 8px;
overflow: auto;
font-size: 16px;
line-height: 1.5;
background-color: white;
white-space: pre-wrap;
}
.highlight {
background-color: #ff0;
border-radius: 3px;
}
#searchCounter {
font-size: 0.9em;
color: #333;
min-width: 50px;
}
input[type="text"], select, input[type="button"] {
padding: 5px;
font-size: 1em;
}
</style>
</head>
<body>
<h1>【検索履歴ドロップダウン】検索 & ジャンプ機能</h1>
<div class="container">
<div class="controls">
<input type="text" id="searchInput" placeholder="検索キーワードを入力">
<input type="button" value="検索 & 履歴追加" onclick="searchAndAddToHistory()">
<input type="button" value="次を検索" onclick="findNext(false)">
<select id="searchHistorySelect" onchange="selectFromHistory()">
<option value="" disabled selected>検索履歴...</option>
</select>
<span id="searchCounter"></span>
</div>
<div id="editor" class="editable-area" contenteditable="true"></div>
</div>
<script>
const editor = document.getElementById('editor');
const searchInput = document.getElementById('searchInput');
const historySelect = document.getElementById('searchHistorySelect');
const counterElement = document.getElementById('searchCounter');
const sampleText = "このテキストエリアは、長文の入力が可能です。\nJavaScriptを使うことで、様々な便利機能を追加できます。例えば、このように検索�{タンを押すと、指定したキーワードの場所までカーソルがジャンプします。\nもう一度「次を検索」�{タンを押すと、次の「キーワード」に移動します。JavaScriptの可能性は無限大です。\nぜひ、このサンプルを改造して、あなただけの機能を作ってみてください。\n最後のキーワードはこちらです。\n\n";
editor.innerText = sampleText.repeat(5);
let currentMatches = [];
let currentIndex = -1;
// 「検索 & 履歴追加」�{タンの機能
function searchAndAddToHistory() {
const keyword = searchInput.value;
if (!keyword.trim()) return; // 空白は無視
// 履歴に同じものがなければ追加する
let exists = false;
for (let i = 0; i < historySelect.options.length; i++) {
if (historySelect.options[i].value === keyword) {
exists = true;
break;
}
}
if (!exists) {
const newOption = document.createElement('option');
newOption.value = keyword;
newOption.text = keyword;
historySelect.appendChild(newOption);
}
// 追加した（または既にある）項目を選択状態にする
historySelect.value = keyword;
// 新しい検索を開始
findNext(true);
}
// 履歴ドロップダウンが変更されたときの機能
function selectFromHistory() {
// ドロップダウンで選んだ値をテキスト�{ックスに反映
searchInput.value = historySelect.value;
// 新しい検索を開始
findNext(true);
}
// 検索のコア機能
function findNext(isNewSearch = false) {
const keyword = searchInput.value;
if (!keyword) return;
if (isNewSearch || editor.dataset.lastKeyword !== keyword) {
removeHighlights();
editor.dataset.lastKeyword = keyword;
const regex = new RegExp(keyword, 'gi');
editor.innerHTML = editor.innerText.replace(regex, `<span class="highlight">${keyword}</span>`);
currentMatches = Array.from(editor.querySelectorAll('.highlight'));
currentIndex = -1;
}
if (currentMatches.length === 0) {
if (isNewSearch) {
alert('キーワードが見つかりませんでした。');
}
counterElement.textContent = '(0 / 0)';
return;
}
currentIndex = (currentIndex + 1) % currentMatches.length;
counterElement.textContent = `(${currentIndex + 1} / ${currentMatches.length})`;
const currentElement = currentMatches[currentIndex];
currentElement.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
currentMatches.forEach(el => el.style.backgroundColor = '#ff0');
currentElement.style.backgroundColor = '#ffa500';
}
function removeHighlights() {
if (editor.dataset.lastKeyword) {
editor.innerHTML = editor.innerText;
counterElement.textContent = '';
}
}
</script>
</body>
</html>
使用変数
| backgroundColor | |
| charset | |
| class | |
| contenteditable | |
| counterElement | |
| currentElement | |
| currentIndex | |
| currentMatches | |
| editor | |
| el | |
| exists | |
| findNext -------( Function ) | |
| historySelect | |
| i | |
| id | |
| innerHTML | |
| innerText | |
| isNewSearch | |
| keyword | |
| lang | |
| lastKeyword | |
| length | |
| newOption | |
| onchange | |
| onclick | |
| placeholder | |
| regex | |
| removeHighlights -------( Function ) | |
| sampleText | |
| searchAndAddToHistory -------( Function ) | |
| searchInput | |
| selectFromHistory -------( Function ) | |
| text | |
| textContent | |
| type | |
| value |