HTML 텍스트 상자에서 키보드 캐럿 위치 설정

HTML 텍스트 상자에서 키보드 캐럿 위치 설정

---

텍스트 상자에서 키보드 캐럿을 특정 위치로 이동하는 방법을 아는 사람이 있습니까?

예를 들어, 텍스트 상자 (예 : 텍스트 영역이 아닌 입력 요소)에 50자가 있고 캐럿을 문자 20 앞에 배치하려면 어떻게해야합니까?

이것은 jQuery 가 필요한 텍스트 영역에서 jQuery 커서 위치 설정이라는 질문과 차별화됩니다 .

---

Josh Stodola의 Javascript를 사용하여 텍스트 상자 또는 TextArea에서 키보드 캐럿 위치 설정 에서 발췌

텍스트 상자 나 텍스트 영역의 원하는 위치에 캐럿을 삽입 할 수있는 일반 기능 :

function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);

    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
}

첫 번째 예상 매개 변수는 키보드 캐럿을 삽입하려는 요소의 ID입니다. 요소를 찾을 수 없으면 아무 일도 일어나지 않습니다. 두 번째 매개 변수는 캐럿 위치 인덱스입니다. 0은 키보드 캐럿을 처음에 배치합니다. elements 값의 문자 수보다 큰 수를 전달하면 키보드 캐럿이 끝에 놓입니다.

IE6 이상, Firefox 2, Opera 8, Netscape 9, SeaMonkey 및 Safari에서 테스트되었습니다. 불행히도 Safari에서는 onfocus 이벤트와 함께 작동하지 않습니다).

위의 기능을 사용하여 키보드 캐럿이 포커스를받을 때 페이지의 모든 텍스트 영역의 끝으로 이동하도록 강제하는 예 :

function addLoadEvent(func) {
    if(typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        if(func) {
            var oldLoad = window.onload;

            window.onload = function() {
                if(oldLoad)
                        oldLoad();

                func();
            }
        }
    }
}

// The setCaretPosition function belongs right here!

function setTextAreasOnFocus() {
/***
 * This function will force the keyboard caret to be positioned
 * at the end of all textareas when they receive focus.
 */
    var textAreas = document.getElementsByTagName('textarea');

    for(var i = 0; i < textAreas.length; i++) {
        textAreas[i].onfocus = function() {
            setCaretPosition(this.id, this.value.length);
        }
    }

    textAreas = null;
}

addLoadEvent(setTextAreasOnFocus);

---

답변의 링크가 깨졌습니다.이 링크가 작동해야합니다 (모든 크레딧은 blog.vishalon.net으로 이동 하십시오 ).

http://snipplr.com/view/5144/getset-cursor-in-html-textarea/

코드가 다시 손실되는 경우 다음 두 가지 주요 기능이 있습니다.

function doGetCaretPosition(ctrl)
{
 var CaretPos = 0;

 if (ctrl.selectionStart || ctrl.selectionStart == 0)
 {// Standard.
  CaretPos = ctrl.selectionStart;
 }
 else if (document.selection)
 {// Legacy IE
  ctrl.focus ();
  var Sel = document.selection.createRange ();
  Sel.moveStart ('character', -ctrl.value.length);
  CaretPos = Sel.text.length;
 }

 return (CaretPos);
}


function setCaretPosition(ctrl,pos)
{
 if (ctrl.setSelectionRange)
 {
  ctrl.focus();
  ctrl.setSelectionRange(pos,pos);
 }
 else if (ctrl.createTextRange)
 {
  var range = ctrl.createTextRange();
  range.collapse(true);
  range.moveEnd('character', pos);
  range.moveStart('character', pos);
  range.select();
 }
}

---

실제로이 솔루션이 실제로 필요했으며 일반적인 기준 솔루션 ( 입력에 초점을 맞춘 다음 값을 자체와 동일하게 설정 ) 이 브라우저 간 작동하지 않으므로 모든 것을 조정하고 편집하여 시간을 보냈습니다. @ kd7 의 코드를 바탕으로 내가 생각해 낸 것입니다.

즐겨! IE6 +, Firefox, Chrome, Safari, Opera에서 작동

크로스 브라우저 캐럿 위치 지정 기술 (예 : 커서를 END로 이동)

// ** USEAGE ** (returns a boolean true/false if it worked or not)
// Parameters ( Id_of_element, caretPosition_you_want)

setCaretPosition('IDHERE', 10); // example

The meat and potatoes is basically @kd7's setCaretPosition, with the biggest tweak being if (el.selectionStart || el.selectionStart === 0), in firefox the selectionStart is starting at 0, which in boolean of course is turning to False, so it was breaking there.

In chrome the biggest issue was that just giving it .focus() wasn't enough (it kept selecting ALL of the text!) Hence, we set the value of itself, to itself el.value = el.value; before calling our function, and now it has a grasp & position with the input to use selectionStart.

function setCaretPosition(elemId, caretPos) {
    var el = document.getElementById(elemId);

    el.value = el.value;
    // ^ this is used to not only get "focus", but
    // to make sure we don't have it everything -selected-
    // (it causes an issue in chrome, and having it doesn't hurt any other browser)

    if (el !== null) {

        if (el.createTextRange) {
            var range = el.createTextRange();
            range.move('character', caretPos);
            range.select();
            return true;
        }

        else {
            // (el.selectionStart === 0 added for Firefox bug)
            if (el.selectionStart || el.selectionStart === 0) {
                el.focus();
                el.setSelectionRange(caretPos, caretPos);
                return true;
            }

            else  { // fail city, fortunately this never happens (as far as I've tested) :)
                el.focus();
                return false;
            }
        }
    }
}

---

I've adjusted the answer of kd7 a little bit because elem.selectionStart will evaluate to false when the selectionStart is incidentally 0.

function setCaretPosition(elem, caretPos) {
    var range;

    if (elem.createTextRange) {
        range = elem.createTextRange();
        range.move('character', caretPos);
        range.select();
    } else {
        elem.focus();
        if (elem.selectionStart !== undefined) {
            elem.setSelectionRange(caretPos, caretPos);
        }
    }
}

---

일부 텍스트 상자에 초점을 맞출 필요가 있고 유일한 문제는 전체 텍스트가 강조 표시되고 캐럿이 끝에 있기를 원한다는 것입니다. 특정한 경우 포커스 후 텍스트 상자 값을 설정하는이 트릭을 사용할 수 있습니다.

$("#myinputfield").focus().val($("#myinputfield").val());

---

<!DOCTYPE html>
<html>
<head>
<title>set caret position</title>
<script type="application/javascript">
//<![CDATA[
window.onload = function ()
{
 setCaret(document.getElementById('input1'), 13, 13)
}

function setCaret(el, st, end)
{
 if (el.setSelectionRange)
 {
  el.focus();
  el.setSelectionRange(st, end);
 }
 else
 {
  if (el.createTextRange)
  {
   range = el.createTextRange();
   range.collapse(true);
   range.moveEnd('character', end);
   range.moveStart('character', st);
   range.select();
  }
 }
}
//]]>
</script>
</head>
<body>

<textarea id="input1" name="input1" rows="10" cols="30">Happy kittens dancing</textarea>

<p>&nbsp;</p>

</body>
</html>

---

function SetCaretEnd(tID) {
    tID += "";
    if (!tID.startsWith("#")) { tID = "#" + tID; }
    $(tID).focus();
    var t = $(tID).val();
    if (t.length == 0) { return; }
    $(tID).val("");
    $(tID).val(t);
    $(tID).scrollTop($(tID)[0].scrollHeight); }

---

다음과 같은 조건을 수정합니다.

function setCaretPosition(elemId, caretPos)
{
 var elem = document.getElementById(elemId);
 if (elem)
 {
  if (typeof elem.createTextRange != 'undefined')
  {
   var range = elem.createTextRange();
   range.move('character', caretPos);
   range.select();
  }
  else
  {
   if (typeof elem.selectionStart != 'undefined')
    elem.selectionStart = caretPos;
   elem.focus();
  }
 }
}

---

이 문제를 해결하는 쉬운 방법을 찾았습니다 .IE 및 Chrome에서 100 % 테스트되었습니다.

function setCaret(eleId, caret)
 {
   var elem = document.getElementById(elemId);
   elem.setSelectionRange(caret, caret);
 }

이 함수에 텍스트 상자 ID와 캐럿 위치를 전달하십시오.

참고 URL : https://stackoverflow.com/questions/512528/set-keyboard-caret-position-in-html-textbox