[javascript] 텍스트 상자에서 TAB 키 캡처 [닫힘]

Program / 글쓴이

Tab텍스트 상자 내의 키 를 사용하여 네 개의 공백을 탭할 수 있기를 원합니다 . 지금처럼 Tab 키는 커서를 다음 입력으로 이동합니다.

UI로 버블 링되기 전에 텍스트 상자의 Tab 키를 캡처하는 JavaScript가 있습니까?

일부 브라우저 (예 : FireFox)에서이를 허용하지 않을 수 있음을 이해합니다. Shift+ Tab또는 Ctrl+ 와 같은 사용자 지정 키 조합은 Q어떻습니까?

답변

keydown/ keyup이벤트 를 캡처하더라도 탭 키가 실행하는 유일한 이벤트이지만 탭 순서에서 다음 항목으로 이동하는 기본 동작이 발생하지 않도록 방지하는 방법이 여전히 필요합니다.

Firefox에서는 preventDefault()이벤트 핸들러에 전달 된 이벤트 객체에 대한 메서드를 호출 할 수 있습니다 . IE에서는 이벤트 핸들에서 false를 반환해야합니다. JQuery 라이브러리는 preventDefaultIE 및 FF에서 작동하는 이벤트 객체에 대한 메서드를 제공합니다 .

<body>
<input type="text" id="myInput">
<script type="text/javascript">
    var myInput = document.getElementById("myInput");
    if(myInput.addEventListener ) {
        myInput.addEventListener('keydown',this.keyHandler,false);
    } else if(myInput.attachEvent ) {
        myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
    }

    function keyHandler(e) {
        var TABKEY = 9;
        if(e.keyCode == TABKEY) {
            this.value += "    ";
            if(e.preventDefault) {
                e.preventDefault();
            }
            return false;
        }
    }
</script>
</body>

답변

양식 항목간에 탭을 분리하는 것보다 탭 들여 쓰기가 작동하지 않는 것이 좋습니다.

마크 다운 상자에 코드를 삽입하기 위해 들여 쓰기를하려면 Ctrl+ K(또는 Mac에서는 ⌘K)를 사용하세요.

실제로 액션을 중지하는 측면에서 jQuery (Stack Overflow가 사용하는)는 이벤트 콜백에서 false를 반환 할 때 이벤트 버블 링을 중지합니다. 이렇게하면 여러 브라우저에서 작업하는 것이 더 쉬워집니다.

답변

이전 답변은 괜찮지 만 나는 행동과 프리젠 테이션을 혼합하는 것에 단호하게 반대하는 사람들 중 하나이기 때문에 (내 HTML에 JavaScript를 넣음) JavaScript 파일에 이벤트 처리 논리를 넣는 것을 선호합니다. 또한 모든 브라우저가 동일한 방식으로 이벤트 (또는 e)를 구현하는 것은 아닙니다. 논리를 실행하기 전에 확인을 수행 할 수 있습니다.

document.onkeydown = TabExample;

function TabExample(evt) {
  var evt = (evt) ? evt : ((event) ? event : null);
  var tabKey = 9;
  if(evt.keyCode == tabKey) {
    // do work
  }
}

답변

키의 기본 동작을 변경하지 않는 것이 좋습니다. 나는 마우스를 건드리지 않고 가능한 한 많이하기 때문에 탭 키를 폼의 다음 필드로 이동하지 않도록하면 매우 가중 될 것입니다.

그러나 단축키는 특히 큰 코드 블록과 중첩에 유용 할 수 있습니다. Shift-TAB은 일반적으로 양식의 이전 필드로 이동하기 때문에 잘못된 옵션입니다. WMD 편집기에서 단축키를 사용하여 코드 탭을 삽입하는 새로운 버튼이 가능할까요?

답변

ScottKoon의 베스트 답변에 문제가 있습니다.

여기있어

} else if(el.attachEvent ) {
    myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
}

해야한다 

} else if(myInput.attachEvent ) {
    myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
}

이로 인해 IE에서는 작동하지 않았습니다. ScottKoon이 코드를 업데이트하기를 바랍니다.

답변

Mac의 Chrome에서 alt-tab은 탭 문자를 <textarea>필드에 삽입 합니다.

하나 :. 쉬!

답변