Добрый день!подскажите пожалуйста, есть область для ввода текста и вывода, и поле поиска. После поиска текст найденный выделяется, в textarea и input стирается,как можно сделать, чтобы текст оставался и была возможность делать новый поиск... и как можно сделать чтобы не только напечатанный текст отображался,но и скопированный(сейчас при копировании текст не отображается)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<style>
</style>
Search: <input type="text" id="text-to-find" value="" type="submit" >
<p>
</p>
<form name="search">
<textarea rows="7" cols="40" name="message"></textarea>
</form>
<div id="printBlock" style="position:absolute; left:400px; top:10px;" ></div>
<script>
(function() {
document.querySelector('input').addEventListener('keydown', function(e) {
if (e.keyCode === 13) {
FindOnPage('text-to-find');
}
});
})();
</script>
<script>
var messageBox = document.search.message;
function onkeypress(e){
var printBlock = document.getElementById("printBlock");
var val = String.fromCharCode(e.keyCode);
printBlock.textContent += val;
}
function onkeydown(e){
if(e.keyCode===8){
var printBlock = document.getElementById("printBlock"),
length = printBlock.textContent.length;
printBlock.textContent = printBlock.textContent.substring(0, length-1);
}
}
messageBox.addEventListener("keypress", onkeypress);
messageBox.addEventListener("keydown", onkeydown);
</script>
<script>
function domRangeHighlight(text) {
var root = document.getElementById('printBlock').firstChild;
var content = root.nodeValue;
if (~content.indexOf(text)) {
if (document.createRange) {
var rng = document.createRange();
rng.setStart(root, content.indexOf(text));
rng.setEnd(root, content.indexOf(text) + text.length);
rng.surroundContents(highlightDiv);
} else {
alert( 'Вероятно, у вас IE8-, смотрите реализацию TextRange ниже' );
}
} else {
alert( 'Совпадений не найдено' );
}
}
</script>
<script type="text/javascript">
var lastResFind="";
var copy_page="";
function TrimStr(s) {
s = s.replace( /^\s+/g, '');
return s.replace( /\s+$/g, '');
}
function FindOnPage(printBlock) {//ищет текст на странице, в параметр передается ID поля для ввода
var obj = window.document.getElementById(printBlock);
var textToFind;
if (obj) {
textToFind = TrimStr(obj.value);//обрезаем пробелы
} else {
alert("Введенная фраза не найдена");
return;
}
if (textToFind == "") {
alert("Вы ничего не ввели");
return;
}
if(document.body.innerHTML.indexOf(textToFind)=="-1")
alert("Ничего не найдено, проверьте правильность ввода!");
if(copy_page.length>0)
document.body.innerHTML=copy_page;
else copy_page=document.body.innerHTML;
document.body.innerHTML = document.body.innerHTML.replace(eval("/name="+lastResFind+"/gi")," ");
document.body.innerHTML = document.body.innerHTML.replace(eval("/"+textToFind+"/gi"),"<b><a name="+textToFind+"style=''>"+textToFind+"</a> </b>");
lastResFind=textToFind;
window.location = '#'+textToFind;
}
</script>
</body>
</html>
Пример
https://ibb.co/YWqyVTB
