使用 jQuery，如何自动选择已用箭头修改的输入文本的值？答案

【问题标题】：With jQuery, how to automatically select the value of an input text that has been modified with the arrows?使用 jQuery，如何自动选择已用箭头修改的输入文本的值？
【发布时间】：2021-09-11 00:57:20
【问题描述】：

我希望能够使用键盘箭头增加/减少输入文本的值并自动选择它（使用 jQuery）。

我成功增加/减少部分，但我在选择部分失败。

我尝试了$input.select();，但没有成功。

我做错了什么？

$(".textInput").keydown(function(event) {
  var $input = $(this);

  if (event.which === 38) {
    $input.val((parseInt($input.val()) + 1));
  } else if (event.which === 40) {
    $input.val((parseInt($input.val()) - 1));
  }

  $input.select();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" value="300" class="textInput">

https://jsfiddle.net/timmyyy/1L94j2ye/2/

【问题讨论】：

请使用tour 并阅读How to Ask。后者中的相关项目符号：“如果可以创建可以链接到的问题的实时示例（例如，在 sqlfiddle.com 或 jsbin.com 上），那么这样做 - 但也将代码复制到问题本身。不是每个人都可以访问外部网站，链接可能会随着时间的推移而中断。使用Stack Snippets 制作内联 JavaScript/HTML/CSS 的现场演示。”
你已经通过尝试解决方案和测试代码做得很好 - 只是它不在这里，它在其他地方。请把它带到这里并创建一个 sn-p，然后我相信有人会帮助你。另外，请解释“选择部分失败”是什么意思

标签： javascript jquery select input

【解决方案1】：

这个问题似乎是关于 jQuery 解决您的 keydown 事件和在同一元素上调用 select() 的冲突 - keydown 回调需要在应用 select() 之前完成解决。这可以通过setTimeout 来缓解

$(".textInput").keydown(function(event) {
  let $input = $(this);
  if (event.which === 38)  $input.val((parseInt($input.val()) + 1));        
  else if (event.which === 40)  $input.val((parseInt($input.val()) - 1));
  setTimeout(() => $input.select());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="300" class="textInput">

【讨论】：