it-swarm.com.de

Legen Sie die Position der Einfügemarke in der HTML-Textbox fest

Weiß jemand, wie man das Tastatur-Caret in einem Textfeld an eine bestimmte Position bewegt?

Wenn sich in einem Textfeld (z. B. Eingabeelement, nicht Textbereich) 50 Zeichen befinden und ich das Caret vor dem Zeichen 20 positionieren möchte, wie würde ich vorgehen?

Dies ist ein Unterschied zu dieser Frage: jQuery Cursorposition im Textbereich festlegen , wofür jQuery erforderlich ist.

159
jonhobbs

Auszug aus Josh Stodolas Einstellen der Position des Einfügezeichens in einer Textbox oder TextArea mit Javascript

Eine generische Funktion, mit der Sie das Caret an einer beliebigen Stelle einer Textbox oder eines gewünschten Textbereichs einfügen können:

function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);

    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
}

Der erste erwartete Parameter ist die ID des Elements, auf dem Sie das Tastatur-Caret einfügen möchten. Wenn das Element nicht gefunden werden kann, passiert (offensichtlich) nichts. Der zweite Parameter ist der Caret-Positon-Index. Null setzt das Tastatur-Caret am Anfang. Wenn Sie eine Zahl übergeben, die größer als die Anzahl der Zeichen im Elementwert ist, wird das Einfügemarke an das Ende gesetzt.

Getestet auf IE6 und höher, Firefox 2, Opera 8, Netscape 9, SeaMonkey und Safari. Leider funktioniert es auf Safari nicht in Kombination mit dem Ereignis onfocus).

Ein Beispiel für die Verwendung der obigen Funktion, um das Tastatur-Caret zu zwingen, an das Ende aller Textbereiche auf der Seite zu springen, wenn sie den Fokus erhalten:

function addLoadEvent(func) {
    if(typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        if(func) {
            var oldLoad = window.onload;

            window.onload = function() {
                if(oldLoad)
                        oldLoad();

                func();
            }
        }
    }
}

// The setCaretPosition function belongs right here!

function setTextAreasOnFocus() {
/***
 * This function will force the keyboard caret to be positioned
 * at the end of all textareas when they receive focus.
 */
    var textAreas = document.getElementsByTagName('textarea');

    for(var i = 0; i < textAreas.length; i++) {
        textAreas[i].onfocus = function() {
            setCaretPosition(this.id, this.value.length);
        }
    }

    textAreas = null;
}

addLoadEvent(setTextAreasOnFocus);
183
kd7

Der Link in der Antwort ist kaputt, dieser sollte funktionieren (alle Credits gehen an blog.vishalon.net ):

http://snipplr.com/view/5144/getset-cursor-in-html-textarea/

Für den Fall, dass der Code erneut verloren geht, sind hier die beiden Hauptfunktionen:

function doGetCaretPosition(ctrl)
{
 var CaretPos = 0;

 if (ctrl.selectionStart || ctrl.selectionStart == 0)
 {// Standard.
  CaretPos = ctrl.selectionStart;
 }
 else if (document.selection)
 {// Legacy IE
  ctrl.focus ();
  var Sel = document.selection.createRange ();
  Sel.moveStart ('character', -ctrl.value.length);
  CaretPos = Sel.text.length;
 }

 return (CaretPos);
}


function setCaretPosition(ctrl,pos)
{
 if (ctrl.setSelectionRange)
 {
  ctrl.focus();
  ctrl.setSelectionRange(pos,pos);
 }
 else if (ctrl.createTextRange)
 {
  var range = ctrl.createTextRange();
  range.collapse(true);
  range.moveEnd('character', pos);
  range.moveStart('character', pos);
  range.select();
 }
}
50
eternal

Da ich diese Lösung wirklich brauchte und die typische Basislösung ( fokussiere die Eingabe - setze dann den Wert auf sich selbst) nicht funktioniert, Im Browser habe ich einige Zeit damit verbracht, alles zu optimieren und zu bearbeiten, damit es funktioniert. Aufbauend auf dem Code von @ kd7 habe ich mir Folgendes ausgedacht.

Viel Spaß! Funktioniert in IE6 +, Firefox, Chrome, Safari, Opera

Browserübergreifende Caret-Positionierungstechnik (Beispiel: Bewegen des Cursors zum ENDE)

// ** USEAGE ** (returns a boolean true/false if it worked or not)
// Parameters ( Id_of_element, caretPosition_you_want)

setCaretPosition('IDHERE', 10); // example

Das Fleisch und die Kartoffeln sind im Grunde genommen die setCaretPosition von @ kd7 , wobei der größte Tweak if (el.selectionStart || el.selectionStart === 0) ist, in Firefox beginnt die selectionStart bei 0 , was im Booleschen natürlich zu Falsch wird, also brach es dort.

In chrome war das größte Problem, dass es nicht ausreichte, nur .focus() anzugeben (es wählte den gesamten Text aus!). Daher setzten wir den Wert von sich selbst auf selbst el.value = el.value; vor dem Aufruf unserer Funktion, und jetzt hat es ein Verständnis & Position mit der Eingabe zu verwenden selectionStart .

function setCaretPosition(elemId, caretPos) {
    var el = document.getElementById(elemId);

    el.value = el.value;
    // ^ this is used to not only get "focus", but
    // to make sure we don't have it everything -selected-
    // (it causes an issue in chrome, and having it doesn't hurt any other browser)

    if (el !== null) {

        if (el.createTextRange) {
            var range = el.createTextRange();
            range.move('character', caretPos);
            range.select();
            return true;
        }

        else {
            // (el.selectionStart === 0 added for Firefox bug)
            if (el.selectionStart || el.selectionStart === 0) {
                el.focus();
                el.setSelectionRange(caretPos, caretPos);
                return true;
            }

            else  { // fail city, fortunately this never happens (as far as I've tested) :)
                el.focus();
                return false;
            }
        }
    }
}

Ich habe die Antwort von kd7 ein wenig angepasst, da elem.selectionStart den Wert false annimmt, wenn selectionStart übrigens 0 ist.

function setCaretPosition(elem, caretPos) {
    var range;

    if (elem.createTextRange) {
        range = elem.createTextRange();
        range.move('character', caretPos);
        range.select();
    } else {
        elem.focus();
        if (elem.selectionStart !== undefined) {
            elem.setSelectionRange(caretPos, caretPos);
        }
    }
}
21
Johannes Ewald

Wenn Sie ein Textfeld fokussieren müssen und Ihr einziges Problem darin besteht, dass der gesamte Text hervorgehoben wird, während das Caret am Ende stehen soll, können Sie in diesem speziellen Fall diesen Trick anwenden, indem Sie den Textfeldwert nach dem Fokussieren auf sich selbst setzen:

$("#myinputfield").focus().val($("#myinputfield").val());
3
manish_s

Ich würde die Bedingungen wie folgt festlegen:

function setCaretPosition(elemId, caretPos)
{
 var elem = document.getElementById(elemId);
 if (elem)
 {
  if (typeof elem.createTextRange != 'undefined')
  {
   var range = elem.createTextRange();
   range.move('character', caretPos);
   range.select();
  }
  else
  {
   if (typeof elem.selectionStart != 'undefined')
    elem.selectionStart = caretPos;
   elem.focus();
  }
 }
}
2
<!DOCTYPE html>
<html>
<head>
<title>set caret position</title>
<script type="application/javascript">
//<![CDATA[
window.onload = function ()
{
 setCaret(document.getElementById('input1'), 13, 13)
}

function setCaret(el, st, end)
{
 if (el.setSelectionRange)
 {
  el.focus();
  el.setSelectionRange(st, end);
 }
 else
 {
  if (el.createTextRange)
  {
   range = el.createTextRange();
   range.collapse(true);
   range.moveEnd('character', end);
   range.moveStart('character', st);
   range.select();
  }
 }
}
//]]>
</script>
</head>
<body>

<textarea id="input1" name="input1" rows="10" cols="30">Happy kittens dancing</textarea>

<p>&nbsp;</p>

</body>
</html>
2
DIpak
function SetCaretEnd(tID) {
    tID += "";
    if (!tID.startsWith("#")) { tID = "#" + tID; }
    $(tID).focus();
    var t = $(tID).val();
    if (t.length == 0) { return; }
    $(tID).val("");
    $(tID).val(t);
    $(tID).scrollTop($(tID)[0].scrollHeight); }
2
Keith Cromm

Ich habe eine einfache Möglichkeit gefunden, dieses Problem zu beheben. Getestet in IE und Chrome 100%

function setCaret(eleId, caret)
 {
   var elem = document.getElementById(elemId);
   elem.setSelectionRange(caret, caret);
 }

Übergeben Sie die Textfeld-ID und die Caret-Position an diese Funktion

0
Iam_NSA