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

Question

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

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

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

score 152 · Accepted Answer

フォーカス後に値をクリアしてからリセットするとうまくいくようです。

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

score 56 · Accepted Answer

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

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

さて、私はあなたのセットアップを複製したかどうか確信が持てません. input要素だと思い<input>ます。

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

score 12 · Accepted Answer

一行でどうだろう…

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

この行は私にとってはうまくいきます。

score 10 · Accepted Answer

参照: @ 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

score 8 · Accepted Answer

2 artlungの回答: 私のコード (IE7、IE8; Jquery v1.6) の 2 行目でのみ動作します:

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

追記： jQueryでinput要素をDOMに追加した場合、IEでフォーカスが設定されない。ちょっとしたトリックを使用しました：

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

score 6 · Accepted Answer

以下のコードを使用していますが、正常に動作します

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();
                }
            }
        }

score 6 · Accepted Answer

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

これは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の記事を参照してください。

score 6 · Accepted Answer

この答えが遅れていることはわかっていますが、人々が答えを見つけていないことがわかります。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

score 4 · Accepted Answer

他の人が言ったように、 clear と fill は私にとってはうまくいきました：

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

score 3 · Accepted Answer

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

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

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

score 2 · Accepted Answer

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

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

トリックを行う必要があります（とにかくそれは常に私のためにあります）。

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

    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ブラウザで動作します..

score 0 · Accepted Answer

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

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

window.onload = pageLoad;

score 0 · Accepted Answer

  var prevInputVal = $('#input_id').val();
  $('#input_id').val('').focus().val(prevInputVal)

入力前の値を変数に保存 -> 空の入力値 -> フォーカス入力 -> 元の値を再割り当て SIMPLE !

score -4 · Accepted Answer

-4

マウスポイントでフォーカスします

$("#TextBox").focus();

于 2019-11-19T06:29:27.073 に答える

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

20 に答える 20

Related

Reference