214

テキストボックス内のキーボードキャレットを特定の位置に移動する方法を知っている人はいますか?

たとえば、テキスト ボックス (たとえば、テキスト領域ではなく入力要素) に 50 文字があり、キャレットを 20 文字の前に配置したい場合、どうすればよいでしょうか?

これは、この質問とは異なります: jQuery Set Cursor Position in Text Area。これには jQuery が必要です。

4

10 に答える 10

233

Josh Stodola のSetting keyboard caret Position in a Textbox or TextArea with Javascriptからの抜粋

テキストボックスまたはテキストエリアの任意の位置にキャレットを挿入できる汎用関数:

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 です。要素が見つからない場合、何も起こりません (明らかに)。2 番目のパラメーターは、キャレット位置のインデックスです。ゼロは、キーボード キャレットを先頭に置きます。要素の値に文字数より大きい数値を渡すと、キーボード キャレットが最後に配置されます。

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);
于 2009-02-04T17:59:10.727 に答える
53

回答のリンクが壊れています。これは機能するはずです (すべてのクレジットはblog.vishalon.netに移動します)。

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

コードが再び失われた場合に備えて、次の 2 つの主な機能があります。

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();
 }
}
于 2010-11-29T10:11:14.103 に答える
37

私は実際にこのソリューションを本当に必要としており、一般的なベースラインソリューション（入力に焦点を合わせ、値をそれ自体に等しく設定する）はクロスブラウザーでは機能しないため、すべてを調整および編集して機能させるために時間を費やしました。@ 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になっているため、そこで壊れていました。

Chromeでの最大の問題は、それを与えるだけで.focus()は不十分であるということでした（すべてのテキストを選択し続けました！）したがって、el.value = el.value;関数を呼び出す前に、それ自体の値をそれ自体に設定しました。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;
            }
        }
    }
}
于 2012-09-20T18:32:14.463 に答える
21

selectionStartが偶然に0の場合、elem.selectionStartはfalseと評価されるため、kd7の答えを少し調整しました。

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);
        }
    }
}
于 2012-04-19T11:54:15.707 に答える
3

If you need to focus some textbox and your only problem is that the entire text gets highlighted whereas you want the caret to be at the end, then in that specific case, you can use this trick of setting the textbox value to itself after focus:

$("#myinputfield").focus().val($("#myinputfield").val());
于 2014-01-14T08:47:09.930 に答える
2 
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); }
于 2011-03-23T16:44:21.397 に答える
1 
<!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>
于 2011-08-14T14:04:48.390 に答える