草庐IT

javascript - 防止 "up arrow"键重置文本框内的光标位置

coder 2025-01-17 原文

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

很重要，对吧？不尽然，如果您的网络应用程序不这样做——您已经落伍了，您的最终用户正在提示。 (至少这里是这样的)。

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

预测文本框有一个 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 中的建议!

最佳答案

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

.html

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

.ts

keyDownEvent(event: any){

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

关于javascript - 防止 "up arrow"键重置文本框内的光标位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23717366/

javascriptampcurrentToggledIndexcodesectionjquerytextboxonkeyuparrow-keys

有关javascript - 防止 "up arrow"键重置文本框内的光标位置的更多相关文章

  1. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou

  2. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  3. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  4. ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2

    为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar

  5. ruby-on-rails - 迷你测试错误 : "NameError: uninitialized constant" - 2

    我遵循MichaelHartl的“RubyonRails教程:学习Web开发”，并创建了检查用户名和电子邮件长度有效性的测试(名称最多50个字符，电子邮件最多255个字符)。test/helpers/application_helper_test.rb的内容是:require'test_helper'classApplicationHelperTest在运行bundleexecraketest时，所有测试都通过了，但我看到以下消息在最后被标记为错误:ERROR["test_full_title_helper",ApplicationHelperTest,1.820016791]test

  6. ruby-on-rails - 相关表上的范围为 "WHERE ... LIKE" - 2

    我正在尝试从Postgresql表(table1)中获取数据，该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中，我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤，而不是严格相等。然而，这是行不通的:scope:my_scope,->(que

  7. 使用 ACL 调用 upload_file 时出现 Ruby S3 "Access Denied"错误 - 2

    我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常，除了该文件不是公开可用的，而且我无法获得它的公共(public)URL。但是当我登录到S3时，我可以正常查看我的文件。为了使其公开可用，我将最后一行更改为obj.upload_file(file

  8. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  9. ruby - RVM "ERROR: Unable to checkout branch ."单用户 - 2

    我在新的Debian6VirtualBoxVM上安装RVM时遇到问题。我已经安装了所有需要的包并使用下载了安装脚本(curl-shttps://rvm.beginrescueend.com/install/rvm)>rvm，但以单个用户身份运行时bashrvm我收到以下错误消息:ERROR:Unabletocheckoutbranch.安装在这里停止，并且(据我所知)没有安装RVM的任何文件。如果我以root身份运行脚本(对于多用户安装)，我会收到另一条消息:Successfullycheckedoutbranch''安装程序继续并指示成功，但未添加.rvm目录，甚至在修改我的.bas

  10. ruby - 如何关闭 ruby​​ gem "Spreadsheet?"中的文件 - 2

    下面的代码在我第一次运行它时就可以正常工作:require'rubygems'require'spreadsheet'book=Spreadsheet.open'/Users/me/myruby/Mywks.xls'sheet=book.worksheet0row=sheet.row(1)putsrow[1]book.write'/Users/me/myruby/Mywks.xls'当我再次运行它时，我会收到更多消息，例如:/Library/Ruby/Gems/1.8/gems/spreadsheet-0.6.5.9/lib/spreadsheet/excel/reader.rb:11

随机推荐