페이지 내에서 ctrl+f 와 같은 기능 구현여부

페이지 내에서 ctrl+f 와 같은 기능 구현여부

QA

페이지 내에서 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


<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를 사용하라고 하는 걸 추천합니다.

글씨를 먼저 쓰고 그 다음에 검색기능을 넣으면 작동이 안되서요..
혹시 찾을 때 하나씩 찾아서 보여주는 거 말고 찾으려는 단어가 버튼 클릭하면 한꺼번에 보여주는 방법이 있을까요?

explorer11에서 테스트 해보니 CTRL + F 입력시 잘 나오긴 하네요.

explorer 대응은 비추천드립니다.

 


<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>

자바스크립트의 indexOf() 함수를 이용하여 개발이 가능하나.. 간단한 답변은 드리기가 어려울것 같습니다.

 

차라리 그냥 "Ctrl + F를 이용하여 확인해보세요" 라는 설명문구를 넣는게 더 수백배는 간단할것 같네요..

답변을 작성하시기 전에 로그인 해주세요.
전체 23
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT