안녕하십니까?
페이지 내에서 ctrl + f를 눌렀을 때와 같은 기능을 구현하려고 합니다.
이벤트 당첨자 안내 페이지를 구현하려고 합니다.
아래는 샘플페이지입니다. 데이터가 약 1000개 정도 있습니다.
관련 소스를 찾아 봤지만 전부 익스플로러에서는 구현이 안되더군요.. ㅡㅡ
혹시 위와 같은 기능 구현 해 보신 분 도움을 요청 드립니다.
<샘플 페이지>
| 찾기 |
| 1111 | 2222 | 3333 | 4444 | 5555 |
| 6666 | 7777 | 8888 | 9999 | 10000 |
| aaaa | bbbb | cccc | dddd | eeee |
| ffff | gggg | hhhh | iiii | jjjj |
| kkkk | llll | mmmm | nnnn | oooo |
답변 4개 / 댓글 4개
채택된 답변
+20 포인트
5년 전
Copy
<meta charset="utf-8">
<input type="text" id="str">
<input type="button" value="찾기" onclick="findStr()">
<div>
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
</div>
<script type="text/javascript">
function findStr() {
var n = 0;
var str = document.getElementById("str").value;
if(navigator.userAgent.indexOf("rv:11") > -1) {
var f, contents = document.body.createTextRange();
for(var i = 0; i <= n && (f = contents.findText(str)) != false; i++) {
contents.moveStart('character');
contents.moveEnd('textedit');
}
if(f) {
contents.moveStart('character', -1);
contents.findText(str);
contents.select();
n++;
}
} else {
window.find(str);
}
}
</script>http://exam.dothome.co.kr/temp/wrid_379861.html
여기 저기 흩어져 있는 코드들 훔쳐다가 짜깁기했습니다.
작동은 하지만 저도 Ctrl + F를 사용하라고 하는 걸 추천합니다.
답변에 대한 댓글 4개
어디보자아
4년 전
안녕하세요 저도 지금 ctrl+f를 구현해보려고 하는데 왜 검색창이 문구 아래로 내려가면 작동이 되지 않는지 알려주실 수 있으신가요?
어디보자아
4년 전
글씨를 먼저 쓰고 그 다음에 검색기능을 넣으면 작동이 안되서요..
혹시 찾을 때 하나씩 찾아서 보여주는 거 말고 찾으려는 단어가 버튼 클릭하면 한꺼번에 보여주는 방법이 있을까요?
혹시 찾을 때 하나씩 찾아서 보여주는 거 말고 찾으려는 단어가 버튼 클릭하면 한꺼번에 보여주는 방법이 있을까요?
4년 전
ie11, chrome, ff 테스트를 했는데 문제 없이 잘 작동을 합니다.
작동 안 된다는 페이지를 보여 주시는 게 빠를 듯하네요.
작동 안 된다는 페이지를 보여 주시는 게 빠를 듯하네요.
bbong
5년 전
모두들 감사합니다.
쟁반짜장님 소스로 힌트를 얻어 해결 되었습니다. ^^
올해 안으로 로또 되십시오~~~~~
조나단입니다
5년 전
자바스크립트의 indexOf() 함수를 이용하여 개발이 가능하나.. 간단한 답변은 드리기가 어려울것 같습니다.
차라리 그냥 "Ctrl + F를 이용하여 확인해보세요" 라는 설명문구를 넣는게 더 수백배는 간단할것 같네요..
검은냥냥이explorer11에서 테스트 해보니 CTRL + F 입력시 잘 나오긴 하네요.
explorer 대응은 비추천드립니다.
Copy
<html>
<head>
<meta charset="utf-8">
<title>onkeydown</title>
<script>
function test(e) {
if (e.keyCode === 114 || (e.ctrlKey && e.keyCode === 70)) {
console.log("CTRL + F");
}
}
</script>
</head>
<body onkeydown="test(event)">
<p>아무 키나 입력해보세요.</p>
</body>
</html>답변을 작성하려면 로그인이 필요합니다.