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

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

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

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

이는 jQuery가 필요한 텍스트 영역의 jQuery Set Cursor Position과 다른 점입니다.

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

고기와 감자는 기본적으로 @kd7의 setCaretPosition이며 가장 큰 변화는if (el.selectionStart || el.selectionStart === 0)firefox에서는 selectionStart가 0에서 시작되며, 부울에서는 False로 바뀌기 때문에 거기서 중단됩니다.

크롬에서 가장 큰 문제는 그냥 주는 것이었다..focus()충분하지 않았습니다(모든 텍스트를 계속 선택).따라서, 우리는 그 자체의 가치를, 그 자체로 설정한다.el.value = el.value;함수를 호출하기 전에 selection Start를 사용할 수 있는 입력과 함께 파악 및 위치가 있습니다.

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

kd7의 답을 조금 수정한 이유는 elem이 있기 때문입니다.selection Start가 우발적으로 0일 경우 selection Start는 false로 평가됩니다.

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);
        }
    }
}

IE 및 Chrome에서 테스트한 이 문제를 쉽게 해결할 수 있는 방법을 찾았습니다.

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

텍스트 상자 ID 및 캐럿 위치를 이 함수에 전달합니다.

일부 텍스트 상자에 포커스를 맞추어야 하는 경우 캐럿이 끝에 있는 동안 텍스트 전체가 강조 표시된 경우 포커스를 맞춘 후 텍스트 상자 값을 자체적으로 설정하는 다음 방법을 사용할 수 있습니다.

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

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();
  }
 }
}

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

HTMLInputElement.set Selection Range ( selection Start , selection End );

// References
var e = document.getElementById( "helloworldinput" );

// Move caret to beginning on focus
e.addEventListener( "focus", function( event )
{
    // References
    var e = event.target;

    // Action
    e.setSelectionRange( 0, 0 );            // Doesn’t work for focus event
    
    window.setTimeout( function()
    {
        e.setSelectionRange( 0, 0 );        // Works
        //e.setSelectionRange( 1, 1 );      // Move caret to second position
        //e.setSelectionRange( 1, 2 );      // Select second character

    }, 0 );

}, false );

브라우저 호환성(text, search, url, tel 및 password 유형만): https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange#Specifications

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