페이지 내에서 ctrl+f 와 같은 기능 구현여부 채택완료
안녕하십니까?
페이지 내에서 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개
</p>
<p><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');
}</p>
<p> if(f) {
contents.moveStart('character', -1);
contents.findText(str);
contents.select();
n++;
}
} else {
window.find(str);
}
}
</script></p>
<p>http://exam.dothome.co.kr/temp/wrid_379861.html
여기 저기 흩어져 있는 코드들 훔쳐다가 짜깁기했습니다.
작동은 하지만 저도 Ctrl + F를 사용하라고 하는 걸 추천합니다.
답변에 대한 댓글 4개
검색창이 문구 아래로 내려간다는 게 무슨 의민지 모르겠네요.
혹시 찾을 때 하나씩 찾아서 보여주는 거 말고 찾으려는 단어가 버튼 클릭하면 한꺼번에 보여주는 방법이 있을까요?
작동 안 된다는 페이지를 보여 주시는 게 빠를 듯하네요.
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
자바스크립트의 indexOf() 함수를 이용하여 개발이 가능하나.. 간단한 답변은 드리기가 어려울것 같습니다.
차라리 그냥 "Ctrl + F를 이용하여 확인해보세요" 라는 설명문구를 넣는게 더 수백배는 간단할것 같네요..
댓글을 작성하려면 로그인이 필요합니다.
explorer11에서 테스트 해보니 CTRL + F 입력시 잘 나오긴 하네요.
explorer 대응은 비추천드립니다.
</p>
<p><html></p>
<p> <head></p>
<p> <meta charset="utf-8"></p>
<p> <title>onkeydown</title></p>
<p> </p>
<p> <script></p>
<p> function test(e) {</p>
<p> if (e.keyCode === 114 || (e.ctrlKey && e.keyCode === 70)) { </p>
<p> console.log("CTRL + F");</p>
<p> }</p>
<p> }</p>
<p> </script></p>
<p> </head></p>
<p> </p>
<p> <body onkeydown="test(event)"></p>
<p> <p>아무 키나 입력해보세요.</p></p>
<p> </body></p>
<p></html></p>
<p>댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인