在按键按下/按键按下后获取输入值

Question

我有一个 <input type="text">，我需要在文本框中的文本更改后调用一个函数(包括在jQuery的keydown和keypress处理程序中执行的操作)。

如果我从jQuery处理程序调用我的函数，则会看到值(e.target.value)在添加输入之前。由于我不想每次手动将输入添加到值中，我该如何调用我的函数并使用更新后的值？

- Andrey Koltsov

Answer 1

如果我理解你的意思正确，那么以下是你可以实现它的方法：

$('input').bind('change keydown keyup',function (){
   /// do your thing here.
   //  use $(this).val() instead e.target.value
});

更新：03/05/13

请注意：与.bind()相比，使用.on()更好。

自jQuery 1.7起，.on()方法是将事件处理程序附加到文档的首选方法。对于早期版本，.bind()方法用于直接向元素添加事件处理程序。处理程序附加到jQuery对象中当前选择的元素，因此这些元素必须在调用.bind()时存在。有关更灵活的事件绑定，请参阅.on()或.delegate()中关于事件委托的讨论。

有关更多信息，请参见jQuery Bind

- Val

---

按键事件 keydown 和 keyup 不能同时被赋值为 keypress 吗？ - Rafael Herscovici

@Dementic 当然可以，但这也取决于你的目标是什么，如果你想在按下键盘 x 秒钟时评估某些东西等等... 但在大多数情况下，即使是 keyup 也足够了 :) 因为你必须按下才能松开... :) 如果我说得有道理的话。 - Val

@Val - 你说的有道理。 - Rafael Herscovici

Answer 2

您可以使用 keyup - 这样您只有在释放按键时才调用它：

$("#idofinputfield").keyup(function() {
    youFunction($(this).val());
});

- Scoobler

---

太棒了！ 我已经苦苦挣扎了几个小时。我简直不敢相信我没有想到这个方法。 来自未来的感谢！ - J Sprague

这是无法避免的。在大多数情况下是没有用处的。 - m4heshd

Answer 3

您可以通过确定新字符插入的位置来生成未来的价值：

$('input').bind('keypress',function (){
   var value = e.target.value,
        idx = e.target.selectionStart,
        key = e.key;
        value =  value.slice(0, idx) + key + value.slice(idx + Math.abs(0));
    return yourfunction(value);
});

- dobra

Answer 4

你尝试过了吗？

$('#target').keyup(function(){       
     alert($(this).val());      
});

- Jishnu A P

Answer 5

如果您需要绑定到层次结构中的上级元素，可以在keyDown处理程序中订阅keyUp事件。

$("#container").keydown(function (e) {
   //here you decide whether to handle the key event, and grab the control that sent the event 
   var myInput = e.target;
   $("#container").one('keyup', function() {
      console.log(myInput.val());  
      // do smth here
   });
});

- Kosau

Answer 6

你应该使用 event.key 来获取文本框显示前的当前输入值。

以下是代码。

function validate()
{
  document.getElementById("divOutput").innerHTML = event.key;
  //I am here returning false so that you can see that this value is being entered before the text is input. This is very useful for number validation purposes.
  return false;
}

Enter Number: <input type="text" id="txtInput" onkeydown="return validate()" /><br />
You Entered <div id="divOutput"></div>

- vibs2006