web-dev-qa-db-ja.com

Googleで入力テキストの末尾にカーソル位置を設定する方法Chrome

フォーカス機能を備えたテキストフィールドにカーソルを設定しようとしています。私はいくつかの調査を行いましたが、提供されたソリューションはどれもGoogle Chromeで機能していないようです。 Internet ExplorerおよびFirefoxでは、このソリューションは正常に機能しています。

Js：

$('#Search').focus(function() {
  var SearchInput = $('#Search');
  var strLength= SearchInput.val().length;
  SearchInput.focus();
  SearchInput[0].setSelectionRange(strLength, strLength);
});

HTML：

<input type="text" id="Search" value="Hello World" />

ここに私の jsfiddle へのリンクがあります。

Googleでこれを機能させる方法はありますかChromeもですか？

javascriptjqueryhtmlgoogle-chrome
19
Guilherme Vaz

入力にフォーカスを合わせたときにカーソルが置かれる前にフォーカスイベントが発生するように思えるので、次のようなsetTimeoutを使用することでハッキングを回避できます。

$('#Search').focus(function() {
    setTimeout((function(el) {
        var strLength = el.value.length;
        return function() {
            if(el.setSelectionRange !== undefined) {
                el.setSelectionRange(strLength, strLength);
            } else {
                $(el).val(el.value);
            }
    }}(this)), 0);
});

このフィドルを試してください：http://jsfiddle.net/esnvh/26/

@SparKがこれを実行キューの最後にプッシュするのに十分だと指摘したように、タイムアウトを0msに編集しました。

19
ruuska

更新されたコード

参照： http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/

setSelectionRangeサポートされていません IEでは、Opera＆Safari

このようなものを作成することをお勧めします（IE、Chrome、Safari、Firefoxで動作します）。

$('#Search').on('mouseup', function() {
    var element = $(this)[0];
    if (this.setSelectionRange) {
        var len = $(this).val().length * 2;
        element.setSelectionRange(len, len);
    }
    else {
        $(this).val($(this).val());
        $(this).focus();
    }
    element.scrollTop = 9999;
});

これを試してください： http://jsfiddle.net/r5UVW/4/

6
Paul Rad

そのためにmouseupイベントを使用します。

$("#Search").mouseup(function () {
    this.setSelectionRange(this.value.length, this.value.length);    
});
4
Anoop Joshi

参考までに、現在、数値入力はsetSelectionRange()をサポートしていないため、簡単な解決策は.select()を使用してテキストを選択することです。デスクトップブラウザではテキストが強調表示され、モバイルではカーソルがテキストの最後に直接移動します。

1
DanV