web-dev-qa-db-ja.com

Javascriptでカーソルをテキストエリアの最後の位置に移動するにはどうすればよいですか？

フォームにテキストエリアとボタンがあります。 textareaには既にテキストが含まれている場合があります。ボタンをクリックすると、カーソルがテキスト領域の最後の位置に移動します。

これは可能ですか？

javascriptjquerypositiontextareamouse-cursor
31
sol

「最後の位置」とは、テキストの終わりを意味しますか？

フォームフィールドの「.value」を変更すると、IEを除くすべてのブラウザでカーソルが最後に移動します。 IEを使用する場合、非標準のインターフェースを使用して、手を汚し、意図的に選択を操作する必要があります。

    if (browserIsIE) {
        var range= element.createTextRange();
        range.collapse(false);
        range.select();
    } else {
        element.focus();
        var v= element.value();
        element.value= '';
        element.value= v;
    }

または、テキストエリアに最後にフォーカスしたときに、カーソルを以前の場所に戻しますか？

IEを除くすべてのブラウザーで、これは「element.focus（）」を呼び出すだけですでに発生します。ブラウザは、入力ごとの最後のカーソル/選択位置を記憶し、フォーカスに戻します。

これはIEで再現するのが非常に難しいでしょう。カーソル/選択がどこにあったかをチェックするために常にポーリングし、それが入力要素内にあった場合はその位置を覚えて、ボタンが押されたときに特定の要素の位置をフェッチして復元する必要があります。これには、「document.selection.createRange（）」の非常に退屈な操作が含まれます。

これを行うのに役立つjQueryのことは何も知りませんが、おそらくどこかにプラグインがあるのでしょうか？

25
bobince

xgMzの答えは私にとって最高でした。ブラウザーについて心配する必要はありません。

var html = $("#MyTextArea").val();
$("#MyTextArea").focus().val("").val(html);

そして、これは私が次回私のためにこれを行うために書いた簡単なjQuery拡張です：

; (function($) {
    $.fn.focusToEnd = function() {
        return this.each(function() {
            var v = $(this).val();
            $(this).focus().val("").val(v);
        });
    };
})(jQuery);

このように使用してください：

$("#MyTextArea").focusToEnd();
34
mkaj

これを行うこともできます：

$(document).ready(function()
{
    var el = $("#myInput").get(0);

    var elemLen = el.value.length;

    el.selectionStart = elemLen;
    el.selectionEnd = elemLen;

    el.focus();
});​

このコードはinputとtextareaの両方で機能します。最新のブラウザでテスト済み：Firefox 23、IE 11およびChrome 28。

jsFiddleはこちらから入手できます： http://jsfiddle.net/cG9gN/1/

ソース： https://stackoverflow.com/a/12654402/114029

6
Leniel Maccaferri

あなたはこれを使うことができます https://github.com/DrPheltRight/jquery-caret

$('input').caretToEnd();
4
spilliton

これは、onclickまたは他のイベント内のテキスト領域に使用するもので、FireFoxおよびIE 7＆8の場合は正常に機能するようです。カーソルはテキストの前ではなく、最後に配置されます。

this.value = "some text I want to pre-populate";
this.blur();
this.focus();
3
Ken

マウスフォーカスを設定し、カーソルを入力の最後に移動します。すべてのブラウザでの動作、ここでは単純なロジック。

input.focus();
tmpStr = input.val();
input.val('');
input.val(tmpStr);
2
Selvamani

デフォルト値をサポートするために@mkaj拡張を少し変更しました

; (function($) {
    $.fn.focusToEnd = function(defaultValue) {
        return this.each(function() {
            var prevValue = $(this).val();
            if (typeof prevValue == undefined || prevValue == "") {
                prevValue = defaultValue;
            }
            $(this).focus().val("").val(prevValue);
        });
    };
})(jQuery);

// See it in action here
$(element).focusToEnd("Cursor will be at my tail...");
0
bn00d