防止“向上箭头”键重置文本框中的光标位置 [英] prevent "up arrow" key reseting cursor position within textbox

问题描述

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

I recently added some predictive text input fields to the web-app I am supporting.

大不了，对吧？不是真的，好像你的网络应用程序不这样做 - 你已经落后于时代，你的最终用户正在抱怨。 （至少它就是这里的结果）。

Big deal, right? Not really, seems like if your web-app doesn't do this -- you are already behind the times and your end-users are complaining. (At least that's how it is over here).

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

So, my question has to do with the "up" arrow key.

预测文本框有 onkeyup 监听器。

处理程序隔离键击并且取决于用户输入的字符。

The handler segregates the key strokes and does something depending on the character the user entered.

向上箭头键允许用户在我创建的加载了建议的div中导航。
我有几个变量跟踪索引等等...
基本上，当用户点击向上箭头时，我会将div的id更改为一个id，该id具有一些与之关联的css，这将使div看起来好像被选中了。此外，我将获取该div中的值并将其分配给用户可以键入的文本框。

The up arrow key allows the user to navigate in a div I created loaded with "suggestions." I have several variables tracking indexes, etc... Basically, when the user hits the up arrow I will change the id of the div to an id that has some css associated with it that will make the div appear as though it is selected. Additionally I will grab the value in that div and assign it to the textbox where the user is able to type.

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

The problem is an aesthetic one. Inherently with all text boxes I am learning, the up arrow key will reset the cursor position. This is happening just before I am writing the new value to the text field.

因此，在每个向上箭头笔划中，用户在文本框中看到一个跳跃光标（它将跳到开头并立即出现在最后）。

So, on each up arrow stroke, the user is seeing a jumping cursor in the textbox (it will jump to the beginning and immediately it will appear at the end).

这是代码 -

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

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

The funny thing is - the "down" arrow works perfectly since by default the down arrow key will place the cursor at the end of the string currently located in the textbox.

好的，所以我已经尝试过的东西 -

Ok, so things that I have already tried -

event.preventDefault（）;
event.stopPropogation（）;

我还试图将光标位置PRIOR设置为使用我在另一篇文章中找到的setCursorPosition函数设置新值here 。 （是的，我接触到了这个）

I also tried to set the cursor position PRIOR to setting the new value to no avail using a setCursorPosition function I found on another post here. (Yeah, I was reaching with this one)

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

I tagged this as JavaScript and Jquery. I prefer to use JavaScript, but open to suggestions in Jquery too!

推荐答案

我认为你能做的就是当他们搬家时光标，抓住它并找出它是什么元素...然后将它存储在一个变量中并聚焦（）它并擦除它然后将你存储的值放回去。

I think what you can do is when they move the cursor, grab that and find out what element it is ... then store it in a variable and focus() it and erase it and then put the value you stored back into it.

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

当大多数时候在jquery / javascript中出现奇怪的光标问题时，这对我有用。尝试一下，如果它不起作用，请告诉我，我会看到还有什么可能是错的。

This works for me when having weird cursor issues in jquery/javascript most of the time. Give it a try and if it doesn't work, let me know and I'll see what else might be wrong.

这篇关于防止“向上箭头”键重置文本框中的光标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！