Javascript 按键/按键后获取输入值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5141431/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get input value after keydown/keypress
提问by Andrey Koltsov
I have an <input type="text">, and I need to call a function after the text in the text box was changed (inluding actions performed during jQuery's keydown and keypress handlers).
我有一个<input type="text">, 我需要在文本框中的文本更改后调用一个函数（包括在 jQuery 的 keydown 和 keypress 处理程序期间执行的操作）。
If I call my function from the jQuery handler, I see the value (e.target.value) as it was before the input was added. As I don't want to manually add the input onto the value every time, how I can call my function and have it use the updated value?
如果我从 jQuery 处理程序调用我的函数，我会看到e.target.value添加输入之前的值 ( )。由于我不想每次都手动将输入添加到值中，如何调用我的函数并让它使用更新后的值？
回答by Val
If I understand you right then something like this is the way u can do it
如果我理解你，那么像这样的事情就是你可以做到的
$('input').bind('change keydown keyup',function (){
/// do your thing here.
// use $(this).val() instead e.target.value
});
Updated: 03/05/13
更新: 03/05/13
Please note: that you are better off to use .on()as oppose to .bind()
请注意：那你最好还是使用.on()为反对.bind()
As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to .bind() occurs. For more flexible event binding, see the discussion of event delegation in .on() or .delegate().
从 jQuery 1.7 开始， .on() 方法是将事件处理程序附加到文档的首选方法。对于早期版本， .bind() 方法用于将事件处理程序直接附加到元素。处理程序附加到 jQuery 对象中当前选定的元素，因此这些元素必须在调用 .bind() 时存在。要获得更灵活的事件绑定，请参阅 .on() 或 .delegate() 中事件委托的讨论。
For more information jQuery Bind
有关更多信息jQuery 绑定
回答by Scoobler
You can use keyup - so you are only calling it once the key has been released:
您可以使用 keyup - 因此您只有在释放密钥后才调用它：
$("#idofinputfield").keyup(function() {
youFunction($(this).val());
});
回答by Jishnu A P
Have u tried out
你试过了吗
$('#target').keyup(function(){
alert($(this).val());
});
回答by Kosau
if you need to bind to an element up in the hierarchy, you can subscribe to the keyUp event in the keyDown handler.
如果您需要绑定到层次结构中的一个元素，您可以订阅 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
});
});
回答by dobra
You can generate the future value by taking the position where the new character will be inserted:
您可以通过获取将插入新字符的位置来生成未来值：
$('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);
});
回答by vibs2006
You should use event.keyto get the current input value before it is displayed in textbox.
您应该使用event.key在它显示在 textbox 之前获取当前输入值。
Here is the code.
这是代码。
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>