JavaScript函数跳转到窗口顶部

Question

更新/解决方案

我有三个选项来防止 View 被推送到页面顶部:

• 将 href 设置为 href="#!"
• 将 href 设置为 href="javascript:;"
• 将对象传递给事件处理程序并使用以下代码阻止默认操作。

示例:

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

感谢@[Scott Brown]和@Barmar

问题

我正在使用以下脚本向输入字段添加一个或多个字符。不幸的是，成功添加 Angular 色后，该函数使 View 跳转到窗口顶部。焦点保留在输入字段上。

View 位置应保持不变，不得移动。我使用这个问题的代码:inserting a text where cursor is using Javascript/jquery 。焦点必须停留在输入字段上。

我的功能(已复制):

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:;"。这将阻止它尝试跳转到任何命名的 anchor 。