【问题标题】:How can I determine what a value would be after a keypress event BEFORE it is applied to the DOM?在将按键事件应用于 DOM 之前,如何确定按键事件之后的值是什么?
【发布时间】:2016-09-25 19:26:10
【问题描述】:

我有一个文本框,用户将在其中输入数字。我想将该数字限制为最多 500 万(5000000)。我想禁止任何会导致该数字超过 500 万的按键操作。我知道我可以等待 keyup 并使用该值,但我想完全阻止按键。

在应用给定的 keydown/keypress 事件之后,如何确定文本框的值在实际发生之前是什么?

编辑:为了清楚起见,考虑这种情况:

该框当前包含数字“4000000”。

用户突出显示最后一个数字并将其更改为 1,使其变为“4000001”

但用户可以简单地在末尾添加一个 1。 keydown 事件看起来完全一样,但结果会超出我想要允许的值范围。

如果 keydown 事件正常应用,我需要知道该框的值是多少,但我需要在它发生之前知道。

需要明确的是,这篇文章并不是关于将文本字段限制为仅限数字。我有能力做到这一点。

【问题讨论】:

  • 到目前为止你的代码在哪里?
  • 可以取消事件,这个做基础研究不难
  • 解决js事件jsfiddle.net/pw9Lgzgk
  • 你们错过了问题的症结所在,所以我更新了这个问题。我可以得到键码的值,但这并不能告诉我最终的值是多少。如果他在值的中间而不是末尾键入一个字符怎么办?我无法知道它被添加到哪里,所以我无法预测它的价值。

标签: javascript jquery html keypress


【解决方案1】:

这就是你要找的吗?

var max = 4000000;
var last_value;

$('#someinput').on('input', function(e){
  var value = $(this).val();

  if(value<=max)
    last_value = value;
  else
    $(this).val(last_value);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="someinput" type="number"/>

【讨论】:

  • 谢谢,但这不是我要找的。这是我目前能想到的唯一方法,但这并不能解决我的问题,因为它允许首先添加文本。我不想在之后简单地覆盖文本的原因是因为我不希望用户丢失光标位置,因为我在 contenteditable div 中进行操作。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-04-18
相关资源
最近更新 更多