问题描述:

Update/Solution

I have three options to prevent the view from being pushed to the top of the page:

  • set the href to href="#!"
  • set the href to href="javascript:;"
  • pass the object to the event-handler and prevent the default action with the following code.

Example:

$('#lang1_special_chars').on("click", ".lang1_char", function(e){

e.preventDefault();

// Rest of the code

});

Thanks to @[Scott Brown] and @Barmar

The Problem

I am using the following script to add one or more character to an input field. Unfortunately, after successfully adding the character, the function makes the view jump to the top of the window. The focus stays on the input field.

The view position should keep and shall not move. I use the code from this question: inserting a text where cursor is using Javascript/jquery. The focus must stay on the input field.

My function (copied):

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;

}

And this is how I call the function:

$('#lang1_special_chars').on("click", ".lang1_char", function(){

var text = $(this).data('char');

insertAtCaret('word_lang1', text);

});

And this is the 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>

Thanks!

网友答案:

It's likely because you're calling href="#" in your a tags. Change it to href="javascript:;". This will stop it attempting to jump to any named anchor.

网友答案:

Change the handler to disable the default action of following the link, by calling event.preventDefault();.

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