it-swarm.com.de

Setzen Sie den Mausfokus und bewegen Sie den Cursor mit jQuery zum Ende der Eingabe

Diese Frage wurde in verschiedenen Formaten gestellt, aber ich kann keine der Antworten in meinem Szenario finden.

Ich verwende jQuery, um die Befehlshistorie zu implementieren, wenn der Benutzer auf/ab-Pfeile trifft. Wenn der Aufwärtspfeil gedrückt wird, ersetze ich den Eingabewert durch den vorherigen Befehl und setze den Fokus auf das Eingabefeld, aber ich möchte, dass der Cursor immer am Ende der Eingabezeichenfolge steht.

Mein Code ist wie folgt:

$(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

Wie erzwinge ich, dass der Cursor nach dem Fokussieren am Ende der Eingabe steht?

80
jerodsanto

Sieht aus wie das Löschen des Wertes nach dem Fokussieren und dem Zurücksetzen von Werken.

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

Es sieht ein bisschen seltsam aus, sogar dumm, aber das funktioniert für mich:

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

Ich bin mir nicht sicher, ob ich Ihr Setup repliziert habe. Ich gehe davon aus, dass input ein <input>-Element ist.

Durch das Zurücksetzen des Wertes (auf sich selbst) wird der Cursor an das Ende der Eingabe gesetzt. Getestet in Firefox 3 und MSIE7.

53
artlung

Hoffe das hilft dir:

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

Was ist in einer einzigen Zeile ...

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

Diese Linie funktioniert für mich.

9
Chris Rosete

2 artlung s Antwort: Es funktioniert nur mit der zweiten Zeile in meinem Code (IE7, IE8; Jquery v1.6)

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

Zusatz: Wenn input Element mit JQuery zu DOM hinzugefügt wurde, wird im IE kein Fokus gesetzt. Ich habe einen kleinen Trick benutzt:

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

Chris Coyier hat ein Mini-jQuery-Plugin, das perfekt funktioniert: http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/

Es verwendet setSelectionRange wenn es unterstützt wird, sonst hat es einen soliden Fallback.

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

Dann können Sie einfach folgendes tun:

input.putCursorAtEnd();
8
jackocnr

Ich weiß, dass diese Antwort zu spät kommt, aber ich kann sehen, dass die Leute keine Antwort gefunden haben. Um zu verhindern, dass die Aufwärts-Taste den Cursor an den Anfang setzt, müssen Sie nur return false von der das Ereignis behandelnden Methode verwenden. Dadurch wird die Ereigniskette angehalten, die zur Cursorbewegung führt. Überarbeiteten Code aus dem OP einfügen:

$(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

Ref: @ will824 Kommentar: Diese Lösung funktionierte für mich ohne Kompatibilitätsprobleme. Die restlichen Lösungen sind in IE9 fehlgeschlagen.

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

Getestet und gefunden in:

Firefox 33
Chrome 34
Safari 5.1.7
IE 9
6
Aamir Shahzad

Ich verwende den folgenden Code und es funktioniert gut

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

Es wird für verschiedene Browser anders sein:

Das funktioniert in 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();

Weitere Einzelheiten finden Sie in diesen Artikeln unter SitePoint , AspAlliance .

5
TheVillageIdiot

wie andere gesagt, klar und sättig gearbeitet hat für mich:

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

Zuerst müssen Sie den Fokus auf das ausgewählte Textboxobjekt setzen und als Nächstes den Wert festlegen.

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

stellen Sie zuerst den Wert ein. Stellen Sie dann den Fokus ein. Wenn es fokussiert, verwendet es den Wert, der zum Zeitpunkt des Fokus vorhanden ist. Daher muss Ihr Wert zuerst festgelegt werden.

diese Logik funktioniert für mich mit einer Anwendung, die einen <input> mit dem Wert eines angeklickten <button>s füllt. val() wird zuerst eingestellt. dann focus()

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

Ich habe das Gleiche gefunden, das oben von einigen Leuten vorgeschlagen wurde. Wenn Sie zuerst focus() und dann val() in die Eingabe schieben, wird der Cursor in Firefox, Chrome und IE am Ende des Eingabewerts positioniert. Wenn Sie die val() zuerst in das Eingabefeld schieben, positionieren Firefox und Chrome den Cursor am Ende, aber IE positioniert ihn bei focus() nach vorne.

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

sollte den Trick machen (hat es für mich sowieso immer).

2
Travis Beatty
    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'));

funktioniert für alle zB Browser .. 

1
madhu

Hier ist ein anderer, ein Einzeiler, der den Wert nicht neu zuordnet

$("#inp").focus()[0].setSelectionRange(99999, 99999);
1
Chong Lip Phang
function CurFocus()
{
    $('.txtEmail').focus(); 
}

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

window.onload = pageLoad;
0
abbijohn

Die Antwort von Scorpion9 funktioniert. Um es klarer zu machen, siehe meinen Code unten

<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