JavaScript関数は、ウィンドウ

Question

更新/ソリューションのトップにジャンプ

私は、ページの一番上にプッシュされてからビューを防止するために、3つのオプションがあります。href="#!" に

• HREFを設定
• hrefをhref="javascript:;"
• に設定すると、オブジェクトがイベントハンドラに渡され、次のコードでデフォルトアクションが実行されなくなります。

例：

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

おかげで@ [スコット・ブラウン]と@Barmar

問題

私は入力、1つまたは複数の文字を追加するには、次のスクリプトを使用しています

フィールド。残念なことに、文字を正常に追加した後、この関数はビューをウィンドウの先頭にジャンプさせます。フォーカスは入力フィールドにとどまります。

ビューの位置は保持し、移動してはいけません。この質問のコードはinserting a text where cursor is using Javascript/jqueryです。フォーカスは入力フィールドにとどまらなければなりません。

My機能（コピー）：

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

そして、これは私が関数を呼び出す方法です：

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

そして、これはHTMLコードです：

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

ありがとう！

Answer 1

aタグにhref="#"と電話している可能性があります。それをhref="javascript:;"に変更します。これにより、名前付きアンカーにジャンプしようとするのを止められます。

Answer 2

event.preventDefault();を呼び出して、リンクをたどるデフォルトのアクションを無効にするようにハンドラーを変更します。

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