マウスフォーカスを設定し、jQueryを使用してカーソルを入力の最後に移動します


94

この質問はいくつかの異なる形式で行われましたが、私のシナリオで機能する答えを得ることができません。

ユーザーが上矢印/下矢印を押したときに、jQueryを使用してコマンド履歴を実装しています。上矢印を押すと、入力値を前のコマンドに置き換えて、入力フィールドにフォーカスを設定しますが、カーソルは常に入力文字列の末尾に配置されるようにします。

私のコードはそのままです:

$(document).keydown(function(e) {
  var key   = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
  var input = self.shell.find('input.current:last');

  switch(key) {
    case 38: // up
      lastQuery = self.queries[self.historyCounter-1];
      self.historyCounter--;
      input.val(lastQuery).focus();
// and it continues on from there

カーソルをフォーカス後の「入力」の最後に配置するにはどうすればよいですか?

回答:


143

フォーカスしてからリセットすると、値がクリアされるように見えます。

input.focus();
var tmpStr = input.val();
input.val('');
input.val(tmpStr);

4
これは、クロスブラウザで機能する唯一の解決策です。どうぞよろしくお願いいたします。
Meshaal、2012年

2
これはFFとクロムでは正常に動作しますが、IEでは動作しません。IEでこの問題を解決する方法を知っている人はいますか?
ジョンスミス

1
注意もすることができますチェーン通話:var temp = input.focus().val(); input.val('').val(temp);
ハーポ

20
これがさらに簡単得ることができます:input.focus().val(input.val());
ファテカルサ

2
で動作していないようcontenteditable1を使用するために持っているかもしれないように、いくつかの理由のための要素.html()ではなく.val()
jg2703

55

少し奇妙に見えますが、ばかげていますが、これは私にとってはうまくいきます:

input.val(lastQuery);
input.focus().val(input.val());

今、私はあなたの設定を複製したかどうかはわかりません。私はと仮定していinputている<input>要素。

値を(それ自体に)再設定すると、カーソルは入力の最後に置かれると思います。Firefox 3およびMSIE7でテスト済み。


1
はい、入力は<input>要素です。私はこれを試してみましたが、FF3またはSafari 4では機能しませんでした
jerodsanto

これに関する更新はありますか?私のために働いた。質問を更新するか、解決策を見つけた場合は回答を追加してください。
artlung 2009

FF15では、これによりカーソルが入力フィールドの先頭に設定されます。それ以外は正常に動作しています。FFのソリューションもありますか?
JochenJung 2012

@JochenJung 2009年以来、これを見ていません-それはFF3とjQueryで動作しました。現在のjQueryとFF15を使用したソリューションを思いついた場合は、この投稿を編集してください。
artlung 2012

44

これがあなたを助けることを願っています:

var fieldInput = $('#fieldName');
var fldLength= fieldInput.val().length;
fieldInput.focus();
fieldInput[0].setSelectionRange(fldLength, fldLength);

4
うまく機能します。これは、値をリセットするよりも良い解決策だと思います。特に、モデルとビューのバインドの種類がある場合はそうです。
morten.c 2016

2
これは正解です。設定したいものを厳密に設定せずに設定します。
Dan Barron、

14

Chris Coyierには、このためのミニjQueryプラグインがあり、完全にうまく機能します。http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/

サポートされている場合はsetSelectionRangeを使用し、サポートされていない場合は確実なフォールバックを使用します。

jQuery.fn.putCursorAtEnd = function() {
  return this.each(function() {
    $(this).focus()
    // If this function exists...
    if (this.setSelectionRange) {
      // ... then use it (Doesn't work in IE)
      // Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
      var len = $(this).val().length * 2;
      this.setSelectionRange(len, len);
    } else {
      // ... otherwise replace the contents with itself
      // (Doesn't work in Google Chrome)
      $(this).val($(this).val());
    }
    // Scroll to the bottom, in case we're in a tall textarea
    // (Necessary for Firefox and Google Chrome)
    this.scrollTop = 999999;
  });
};

その後、あなたはただ行うことができます:

input.putCursorAtEnd();

驚くべきことに、2020年に私が見つけたソリューションだけが確実に機能するようです。
AdamJones


8

2 artlungの答え:私のコード(IE7、IE8、Jquery v1.6)の2行目でのみ機能します。

var input = $('#some_elem');
input.focus().val(input.val());

追加: JQueryを使用して入力要素がDOMに追加された場合、IEでフォーカスが設定されません。私は少しトリックを使いました:

input.blur().focus().val(input.val());

1
この種類は私にとってはうまくいきましたが、私は次のようなことをしなければなりませんでした:var input = $( "#inputID"); tmp = input.val(); input.focus()。val( "")。blur()。focus()。val(tmp);
will824 2013年

@ will824あなたのコメントソリューションは私のために働きました。回答として投稿しています。
アーミルShahzad 2014

8

参照:@ will824コメント、このソリューションは私にとっては互換性の問題なしで機能しました。IE9では残りのソリューションが失敗しました。

var input = $("#inputID");
var tmp = input.val();
input.focus().val("").blur().focus().val(tmp);

テストし、動作していることが見つかりました:

Firefox 33
Chrome 34
Safari 5.1.7
IE 9

6

私はこの答えが遅れるのを知っていますが、人々が答えを見つけていないのを見ることができます。return falseイベントを処理するメソッドからだけ、上方向キーがカーソルを最初に置くのを防ぎます。これにより、カーソルの移動につながるイベントチェーンが停止します。以下のOPからの改訂されたコードを貼り付けます。

$(document).keydown(function(e) {
  var key   = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
  var input = self.shell.find('input.current:last');

  switch(key) {
    case 38: // up
      lastQuery = self.queries[self.historyCounter-1];
      self.historyCounter--;
      input.val(lastQuery).focus();
      // HERE IS THE FIX:
      return false; 
// and it continues on from there

1
2行目を次のように減らすことができますvar key = e.charCode || e.keyCode || 0;
Gone Coding

6

以下のコードを使用し、それは正常に動作します

function to_end(el) {
            var len = el.value.length || 0;
            if (len) {
                if ('setSelectionRange' in el) el.setSelectionRange(len, len);
                else if ('createTextRange' in el) {// for IE
                    var range = el.createTextRange();
                    range.moveStart('character', len);
                    range.select();
                }
            }
        }

6

ブラウザーによって異なります。

これはffで動作します:

    var t =$("#INPUT");
    var l=$("#INPUT").val().length;
    $(t).focus();

    var r = $("#INPUT").get(0).createTextRange();
    r.moveStart("character", l); 
    r.moveEnd("character", l);      
    r.select();

詳細はこちらの記事にあります SitePointAspAllianceの


3

他の人が言ったように、クリアとフィルは私のために働きました:

    var elem = $('#input_field');
    var val = elem.val();
    elem.focus().val('').val(val);

3

最初に値を設定します。次に、フォーカスを設定します。フォーカスすると、フォーカス時に存在する値が使用されるため、最初に値を設定する必要があります。

このロジック<input>は、にclickedの値を入力するアプリケーションで機能します<button>val()最初に設定されます。その後focus()

$('button').on('click','',function(){
    var value = $(this).attr('value');
    $('input[name=item1]').val(value);
    $('input[name=item1]').focus();
});

:Uはそれより簡単な1行の代わりに、2作ることができます$('input[name=item1]').val(value).focus();
inMILD

2

私は数人の人々によって上記で提案されたものと同じものを見つけました。あなたがいる場合focus()最初に、次にpush val()入力に、カーソルは、Firefox、ChromeとIEでの入力値の最後に配置されます。val()最初に入力フィールドにを押すと、FirefoxとChromeはカーソルを最後に配置しますが、IEはカーソルを前に配置しますfocus()

$('element_identifier').focus().val('some_value') 

トリックを実行する必要があります(とにかくそれは常に私のために持っています)。


2

最初に、選択したテキストボックスオブジェクトにフォーカスを設定する必要があり、次に値を設定します。

$('#inputID').focus();
$('#inputID').val('someValue')

1
私はこれを試しましたが動作しません。div content editableをtrueに設定しても機能しますか?
Rupam Datta 2013

1
    function focusCampo(id){
        var inputField = document.getElementById(id);
        if (inputField != null && inputField.value.length != 0){
            if (inputField.createTextRange){
                var FieldRange = inputField.createTextRange();
                FieldRange.moveStart('character',inputField.value.length);
                FieldRange.collapse();
                FieldRange.select();
            }else if (inputField.selectionStart || inputField.selectionStart == '0') {
                var elemLen = inputField.value.length;
                inputField.selectionStart = elemLen;
                inputField.selectionEnd = elemLen;
                inputField.focus();
            }
        }else{
            inputField.focus();
        }
    }

$('#urlCompany').focus(focusCampo('urlCompany'));

すべてのIEブラウザで動作します。



0
function CurFocus()
{
    $('.txtEmail').focus(); 
}

function pageLoad()
{
   setTimeout(CurFocus(),3000);
}

window.onload = pageLoad;

0

scorpion9からの回答が機能します。より明確にするために、以下の私のコードを参照してください、

<script src="~/js/jquery.js"></script> 
<script type="text/javascript">
    $(function () {
        var input = $("#SomeId");
        input.focus();
        var tmpStr = input.val();
        input.val('');
        input.val(tmpStr);
    });
</script>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.