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

Posted 2023-05-07

【中文标题】防止“向上箭头”键在文本框中重置光标位置

【英文标题】：prevent "up arrow" key reseting cursor position within textbox

【发布时间】：2014-07-06 05:02:54

【问题描述】：

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

很重要，对吧？并非如此，如果您的网络应用程序不这样做，您似乎已经落后于时代并且您的最终用户正在抱怨。 （至少这里是这样）。

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

预测文本框有一个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();

我还尝试使用我在另一篇帖子here 上找到的 setCursorPosition 函数在设置新值之前设置光标位置无效。 （是的，我正在使用这个）

我将其标记为 javascript 和 Jquery。我更喜欢使用 JavaScript，但也愿意接受 Jquery 中的建议！

【问题讨论】：

首先：动态 ID 不好。使用数组什么的；它将使您的代码更简单。接下来，请event.keyCode === 38。它不是一个字符串。 preventDefault() 是正确的，但你应该在 keydown 上做。 （其中大部分可能应该是。）

是的，尝试使用keydown 而不是keyup 以使用preventDefault() 阻止事件

@minitech - 感谢您的建议。将我的听众更改为 onkeydown 并添加 preventDefault 就可以了！

还要添加一件事 - 我需要将 preventDefault 移动到它自己的处理程序中 + 我为 keydown 事件设置了另一个侦听器，因为我在那里进行其他按键处理并且 keydown 事件确实不包含我需要的键码...

耶！您可以将其添加为自我回答吗？其他人可能会发现它很有用！

【参考方案1】：

正如瑞恩建议的那样。我是如何在 Angular 4.x 中实现这一点的

.html

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

.ts

keyDownEvent(event: any)

if (event.keyCode === 38 && event.key == "ArrowUp")

 event.preventDefault();
 //logic..

【讨论】：

可能适用于任何角度版本，因为它是标准 DOM 行为

【参考方案2】：

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

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

当大部分时间在 jquery/javascript 中遇到奇怪的光标问题时，这对我有用。试一试，如果不起作用，请告诉我，我会看看还有什么问题。