防止“向上箭头”;键在文本框内重置光标位置

prevent "up arrow" key reseting cursor position within textbox

本文关键字：文本 位置 置光标 向上箭头 防止      更新时间：2023-09-26

我最近在我支持的web应用程序中添加了一些预测文本输入字段。

很重要，对吧?如果你的网页应用没有做到这一点，你就已经落后于时代，你的终端用户也会抱怨。(至少在这里是这样的)。

所以，我的问题与"向上"箭头键有关。

预测文本框有一个onkeyup监听器。

处理程序隔离按键并根据用户输入的字符执行操作。

向上箭头键允许用户在我创建的包含"建议"的div中导航。我有几个变量跟踪指数等。基本上，当用户点击向上箭头时，我将把div的id更改为一个与它相关的css的id，这将使div看起来好像是被选中的。另外，我将获取该div中的值并将其分配给用户能够键入的文本框。

这是一个美学问题。固有的所有文本框，我正在学习，向上箭头键将重置光标的位置。这发生在我将新值写入文本字段之前。

因此，在每次向上的箭头笔划时，用户都会看到文本框中有一个跳跃的光标(它会跳到开始并立即出现在结束处)。

下面是代码-

if (event.keyCode === 38 && currentUserInput.length > 0) {
    // user has toggled out of the text input field, save their typing thus far
    if (currentToggledIndex == -1) {
        currentToggledIndex = autoFillKeywordsList.length-1;
        savedKeywordUserInput = currentUserInput;
    }
    else {
        // revert currently selected index back to its original id
        document.getElementById("kw_selected").id = "kw_" + currentToggledIndex ;
        // user has toggled back into user input field
        if (currentToggledIndex == 0) {
            currentToggledIndex = -1;
        }
        // user has toggled to the next suggestion
        else {
            currentToggledIndex--;
        }
    }
    // 2. Determine next action based on the updated currentToggledIndex position
    // revert the user input field back to what the user had typed prior to 
    // toggling out of the field
    if (currentToggledIndex == -1) {
        element.value = savedKeywordUserInput;
    }
    // mark the toggled index/keyword suggestion as "selected" and copy 
    // its value into the text field
    else {
        document.getElementById("kw_"+currentToggledIndex).id = "kw_selected";            
        element.value = autoFillKeywordsList[currentToggledIndex];
    }
    // 3. Determine what the user can do based on the current value currently 
    // selected/displayed
    displayAppropriateButtonActions(element.value);
}

有趣的是-"向下"箭头工作完美，因为默认情况下，向下箭头键将光标放置在当前位于文本框中的字符串的末尾。

好的，那么我已经尝试过的东西-

event.preventDefault();event.stopPropogation();

我还试图设置光标位置之前设置新值没有用setCursorPosition函数我发现在另一个帖子在这里。(是的，我一直在拿这个)

我将其标记为JavaScript和Jquery。我更喜欢使用JavaScript，但也欢迎Jquery的建议!

按照Ryan的建议。我是如何在角4中实现这个的。X是

. html 

<.. (keydown)="keyDownEvent($event)" >

.ts 

keyDownEvent(event: any){
if (event.keyCode === 38 && event.key == "ArrowUp")
{
 event.preventDefault();
 //logic..
}

我认为你能做的是当他们移动光标时，抓住它，找出它是什么元素。然后将其存储在一个变量中，并对其进行focus()并删除它，然后将存储的值放回其中。

var holdme = $("#myelement").val();
$("#myelement").focus().val('').val(holdme);

这适用于我有奇怪的光标问题在jquery/javascript大多数时间。试一试，如果不行，告诉我，我看看还有什么问题。

我发现它可以很好地捕捉插入符号位置，模糊，恢复插入符号位置，然后再次对焦。

myTextInput.onkeydown = function(e){
    //some other code
    if(e.key == "ArrowDown" || e.key == 40 || e.key == "ArrowUp" || e.key == 38){
        var caretPos = this.selectionStart;
        //do your stuff with up and down arrows
        e.preventDefault();
        this.blur();
        this.selectionStart = caretPos;
        this.selectionEnd = caretPos;
        this.focus();
    }
}

插入符号会很快消失，但我认为你必须非常细心才能注意到

相关文章：