JavaScript-Funktion springt auf den oberen Rand des Fensters

Question

Update/Lösung

Ich habe drei Optionen aus der Ansicht zu verhindern, dass oben auf der Seite geschoben wird:

• stellen Sie den href href="#!"
• Setzen Sie die href auf href="javascript:;"
• übergeben Sie das Objekt an den Event-Handler und verhindern Sie die Standardaktion mit dem folgenden Code.

Beispiel:

$('#lang1_special_chars').on("click", ".lang1_char", function(e){ 
    e.preventDefault(); 
    // Rest of the code 
}); 

Dank @ [Scott Brown] und @Barmar

Das Problem

ich das folgende Skript bin mit einem oder mehreren Zeichen an einen Eingang hinzufügen Feld. Nach dem erfolgreichen Hinzufügen des Zeichens führt die Funktion leider dazu, dass die Ansicht an den Anfang des Fensters springt. Der Fokus bleibt auf dem Eingabefeld.

Die Ansichtsposition sollte beibehalten werden und darf sich nicht bewegen. Ich benutze den Code von dieser Frage: inserting a text where cursor is using Javascript/jquery. Der Fokus muss auf dem Eingabefeld bleiben.

Meine Funktion (kopiert):

function insertAtCaret(areaId,text, jumpTo) { 
    var txtarea = document.getElementById(areaId); 
    var scrollPos = txtarea.scrollTop; 
    var strPos = 0; 
    var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? 
     "ff" : (document.selection ? "ie" : false)); 
    if (br == "ie") { 
     txtarea.focus(); 
     var range = document.selection.createRange(); 
     range.moveStart ('character', -txtarea.value.length); 
     strPos = range.text.length; 
    } 
    else if (br == "ff") strPos = txtarea.selectionStart; 

    var front = (txtarea.value).substring(0,strPos); 
    var back = (txtarea.value).substring(strPos,txtarea.value.length); 
    txtarea.value=front+text+back; 
    strPos = strPos + text.length; 
    if (br == "ie") { 
     txtarea.focus(); 
     var range = document.selection.createRange(); 
     range.moveStart ('character', -txtarea.value.length); 
     range.moveStart ('character', strPos); 
     range.moveEnd ('character', 0); 
     range.select(); 
    } 
    else if (br == "ff") { 
     txtarea.selectionStart = strPos; 
     txtarea.selectionEnd = strPos; 
     txtarea.focus(); 
    } 
    txtarea.scrollTop = scrollPos; 
} 

Und das ist, wie ich die Funktion aufrufen:

$('#lang1_special_chars').on("click", ".lang1_char", function(){ 
    var text = $(this).data('char'); 
    insertAtCaret('word_lang1', text); 
}); 

Und dies ist der html-Code:

<div class="input-field"> 
    <input type="text" id="word_lang1" placeholder="Pal" required="" class="validate" tabindex="1"> 
    <label for="word_lang1" class="active">Deutsch</label> 
    <div id="lang1_special_chars"> 
     <a href="#" class="lang1_char" data-char="Ä"> 
      <div class="chip orange lighten-2">Ä</div> 
     </a> 
     <a href="#" class="lang1_char" data-char="ä"> 
      <div class="chip orange lighten-2">ä</div> 
     </a> 
     <a href="#" class="lang1_char" data-char="Ö"> 
      <div class="chip orange lighten-2">Ö</div> 
     </a> 
     <a href="#" class="lang1_char" data-char="ö"> 
      <div class="chip orange lighten-2">ö</div> 
     </a> 
     <a href="#" class="lang1_char" data-char="Ü"> 
      <div class="chip orange lighten-2">Ü</div> 
     </a> 
     <a href="#" class="lang1_char" data-char="ü"> 
      <div class="chip orange lighten-2">ü</div> 
     </a> 
     <a href="#" class="lang1_char" data-char="ß"> 
      <div class="chip orange lighten-2">ß</div> 
     </a> 
    </div> 
</div> 

Dank!

Answer 1

Es ist wahrscheinlich, weil Sie href="#" in Ihren a Tags aufrufen. Ändern Sie es in href="javascript:;". Dies wird den Versuch stoppen, zu einem beliebigen benannten Anker zu springen.

Answer 2

Ändern Sie den Handler, um die Standardaktion für das Verfolgen des Links zu deaktivieren, indem Sie event.preventDefault(); aufrufen.

$('#lang1_special_chars').on("click", ".lang1_char", function(e){ 
    e.preventDefault(); 
    var text = $(this).data('char'); 
    insertAtCaret('word_lang1', text); 
});