'2013/03'에 해당되는 글 1건

  1. 2013.03.21 input text 마지막 글자에 focus 맞추기

<input type="text" id="title"/>

일단 내가 focus를 주고 싶은 input box는 요놈.

$('#myModal').on('shown', function () {
   setCaretAtEnd($("#title"));
  })

bootstrap의 modal은 좀 특이(?)해서 저렇게 shown 됐을때 포커스를 먹여야 먹힌다. 그냥 document.ready 상태에서 focus() 하면 소용이 없었음. 그냥 팝업에 쓰려면 바로  setCaretAtEnd($("#title")); 로 실행해도 상관 없음.

 //input text에 focus
 function setCaretAtEnd(elem) {
        var elemLen = elem.val().length;
        if(elemLen == 0){
         elem.focus();
         return;
        }
        // For IE Only
        if (document.selection) {
            // Set focus
            elem.focus();
            // Use IE Ranges
            var oSel = document.selection.createRange();
            // Reset position to 0 & then set at end
            oSel.moveStart('character', -elemLen);
            oSel.moveStart('character', elemLen);
            oSel.moveEnd('character', 0);
            oSel.select();
        }
        else if (document.selection == undefined || elem.selectionStart || elem.selectionStart == '0') {
            // Firefox/Chrome
            elem.focus().val(elem.val());
        } // if
    } // SetCaretAtEnd()

이렇게 하면 ie에서도, 크롬에서도 잘 된다. 파폭은 안 해봐서 모름. 출처는 구글링 후 약간 수정..

Posted by Engineer135
,