Question

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

如果我从jQuery处理程序调用我的函数，我会看到在添加输入之前的值（e.target.value）。因为我不想每次都手动将输入添加到值上，我如何调用我的函数并让它使用更新的值？

Answer 1

如果我理解你，那么这样的事情就是你能做到的事情

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

已更新：03/05/13

请注意：您最好使用.on()反对.bind()

从jQuery 1.7开始，.on（）方法是将事件处理程序附加到文档的首选方法。对于早期版本，.bind（）方法用于将事件处理程序直接附加到元素。处理程序附加到jQuery对象中当前选定的元素，因此这些元素必须存在于调用.bind（）的位置。有关更灵活的事件绑定，请参阅.on（）或.delegate（）中对事件委派的讨论。

了解更多信息jQuery Bind

Answer 2

您可以使用keyup - 因此只有在密钥被释放后才会调用它：

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

Answer 3

你试过吗

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

Answer 4

如果需要绑定到层次结构中的元素，则可以在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
   });
});

Answer 5

您可以通过插入新字符的位置来生成将来的值：

$('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);
});

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>

在keydown / keypress之后获取输入值

6 个答案: