web-dev-qa-db-ja.com

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

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

ユーザーが上下矢印を押したときにコマンド履歴を実装するために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

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

javascriptjqueryfocuscursor
88
jerodsanto

焦点を合わせた後に値をクリアしてから、動作をリセットするように見えます。

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

それは少し奇妙で、ばかげているように見えますが、これは私のために働いています：

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

今、私はあなたのセットアップを複製したかどうかはわかりません。 inputは<input>要素であると想定しています。

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

54
artlung

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

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

1行で...

$('#txtSample').focus().val($('#txtSample').val());

この行は私のために機能します。

11
Chris Rosete

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();
9
jackocnr

2 artlungの答え：私のコード（IE7、IE8、Jquery v1.6）でのみ2行目で動作します：

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

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

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

私はこの答えが遅れることを知っていますが、答えを見つけていない人々を見ることができます。上キーがカーソルを先頭に置くのを防ぐには、イベントを処理するメソッドから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
6
pederOverland

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

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

動作確認済み：

Firefox 33
Chrome 34
Safari 5.1.7
IE 9
6
Aamir Shahzad

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

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
Tomas

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

これは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();

詳細については、これらの記事の SitePoint 、 AspAlliance をご覧ください。

5
TheVillageIdiot

他の人が言ったように、クリアとフィルが私のために働いた：

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

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

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

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

このロジックは、クリックされた<input>の値を<button>に取り込むアプリケーションで機能します。 val()が最初に設定されます。次にfocus()

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

私は数人の人々によって上で提案されたのと同じことを見つけました。最初にfocus()を実行してから、val()を入力にプッシュすると、Firefox、Chrome、およびIEでカーソルが入力値の最後に配置されます。 val()を最初に入力フィールドにプッシュすると、FirefoxとChromeはカーソルを最後に配置しますが、IEはfocus()を押すとカーソルを前面に配置します。

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

トリックを行う必要があります（とにかく私にとっては常に持っています）。

2
Travis Beatty

もう1つ、値を再割り当てしない1つのライナーがあります。

$("#inp").focus()[0].setSelectionRange(99999, 99999);
2
Chong Lip Phang
    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'));

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

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

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

window.onload = pageLoad;
0
abbijohn

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>
0
Diganta Kumar