keydown Ereignis neuen Wert

Question

Browser: Google Chrome V19.0.1084.52

Ich habe eine Textbox, die eine Zahl kleiner als oder gleich 255 sein muss, auf keydown ich überprüfen möchten, ob dieser Wert über oder gleich zu 255 sonst verhindere das Ereignis.

in der Konsole, wenn ich console.log das Ereignis es event.srcElement.value als der Wert von 12 => 123, also erscheint zeigen wird, wenn ich nur event.srcElement.value console.log wird es zeigen, wie die Eingabe war, wird nicht sein.

Console.logs geschehen nacheinander, nichts dazwischen, keine Pausen.

Wie kann ich herausfinden, was der neue Wert einer Textbox auf Keydown sein wird und warum gibt die console.log andere Ergebnisse zurück?

Dank

Hier ist mein Code:

function inputNumeric(event,max) { 

    console.log (event); 
    console.log ('event.originalEvent.srcElement.value: '+event.originalEvent.srcElement.value); 
    console.log ('event.srcElement.value: '+event.srcElement.value); 

} 

$("#rs485addr").keydown(function(event) { 
    inputNumeric(event); 
}); 

console.log:

event.originalEvent.srcElement.value: 12 
event.srcElement.value: 12 

event.srcElement:

accept: "" 
accessKey: "" 
align: "" 
alt: "" 
attributes: NamedNodeMap 
autocomplete: "" 
autofocus: false 
baseURI: "http://10.50.50.60/controller/?bid=10" 
checked: false 
childElementCount: 0 
childNodes: NodeList[0] 
children: HTMLCollection[0] 
classList: DOMTokenList 
className: "width-60" 
clientHeight: 18 
clientLeft: 2 
clientTop: 2 
clientWidth: 62 
contentEditable: "inherit" 
dataset: DOMStringMap 
defaultChecked: false 
defaultValue: "1" 
dir: "" 
dirName: "" 
disabled: false 
draggable: false 
files: null 
firstChild: null 
firstElementChild: null 
form: null 
formAction: "" 
formEnctype: "application/x-www-form-urlencoded" 
formMethod: "get" 
formNoValidate: false 
formTarget: "" 
hidden: false 
id: "rs485addr" 
incremental: false 
indeterminate: false 
innerHTML: "" 
innerText: "" 
isContentEditable: false 
jQuery17102950612970162183: 22 
labels: NodeList[1] 
lang: "" 
lastChild: null 
lastElementChild: null 
localName: "input" 
max: "" 
maxLength: 3 
min: "" 
multiple: false 
name: "" 
namespaceURI: "http://www.w3.org/1999/xhtml" 
nextElementSibling: null 
nextSibling: Text 
nodeName: "INPUT" 
nodeType: 1 
nodeValue: null 
offsetHeight: 22 
offsetLeft: 183 
offsetParent: HTMLBodyElement 
offsetTop: 365 
offsetWidth: 66 
onabort: null 
onbeforecopy: null 
onbeforecut: null 
onbeforepaste: null 
onblur: null 
onchange: null 
onclick: null 
oncontextmenu: null 
oncopy: null 
oncut: null 
ondblclick: null 
ondrag: null 
ondragend: null 
ondragenter: null 
ondragleave: null 
ondragover: null 
ondragstart: null 
ondrop: null 
onerror: null 
onfocus: null 
oninput: null 
oninvalid: null 
onkeydown: null 
onkeypress: null 
onkeyup: null 
onload: null 
onmousedown: null 
onmousemove: null 
onmouseout: null 
onmouseover: null 
onmouseup: null 
onmousewheel: null 
onpaste: null 
onreset: null 
onscroll: null 
onsearch: null 
onselect: null 
onselectstart: null 
onsubmit: null 
onwebkitfullscreenchange: null 
onwebkitfullscreenerror: null 
onwebkitspeechchange: null 
outerHTML: "<input class="width-60" id="rs485addr" maxlength="3" type="textbox" value="1">" 
outerText: "" 
ownerDocument: HTMLDocument 
parentElement: HTMLSpanElement 
parentNode: HTMLSpanElement 
pattern: "" 
placeholder: "" 
prefix: null 
previousElementSibling: HTMLLabelElement 
previousSibling: Text 
readOnly: false 
required: false 
scrollHeight: 16 
scrollLeft: 0 
scrollTop: 0 
scrollWidth: 60 
selectionDirection: "forward" 
selectionEnd: 3 
selectionStart: 3 
size: 20 
spellcheck: true 
src: "" 
step: "" 
style: CSSStyleDeclaration 
tabIndex: 0 
tagName: "INPUT" 
textContent: "" 
title: "" 
translate: true 
type: "text" 
useMap: "" 
validationMessage: "" 
validity: ValidityState 
value: "123" 
valueAsDate: null 
valueAsNumber: NaN 
webkitGrammar: false 
webkitRegionOverflow: "undefined" 
webkitSpeech: false 
webkitdirectory: false 
webkitdropzone: "" 
willValidate: true 

Answer 1

Ich bin nicht sicher, ob es könnte Hilfe, aber wenn ich mit Witz umgehen musste ha ähnliche Situation in einem Event-Listener Ich verwendete eine setTimeout() mit 1ms Timeout, wo ich die Hauptfunktionalität für den Wert überprüfen, etc.

Das ist, weil, wenn das Ereignis keydown ausgelöst wird das Eingabefeld ist noch nicht mit dem neuen gefüllt Daten.

Einfache jQuery Beispiel:

$('#input').on('keydown', function(e) { 
    var field = $(this); 
    var prevValue = field.val(); 
    setTimeout(function() { 
    // check if new value is more or equal to 255 
    if (field.val() >= 255) { 
     // fill with previous value 
     field.val(prevValue); 
    } 

    }, 1); 
}); 

UPDATE

Use 'Eingang' Veranstaltung in modernen Browsern.

var prevValue = 0; 
$('#input').on('input', function(e) { 
    var field = $(this); 
    // check if new value is more or equal to 255 
    if (field.val() >= 255) { 
    // fill with previous value 
    field.val(prevValue); 
    } else { 
    // If value is lower than 255 set it in prev value. 
    prevValue = field.val(); 
    } 
}); 

Answer 2

Das einzige, was ich tun kann, ist, dass das srcElement Objekt, das noch in der Konsole ausgegeben wird, wird auf das Ereignis Objekt verknüpft, auch nach dem Ereignisse KeyDown, so dass das Objekt in der Konsole von 12 aktualisiert bis 123 auch wenn schon in der Konsole.

Es ist nicht mit dem direkten Ausgang von event.srcElement.value geschieht, weil das ein wörtlicher Wert und wird auf der Protokollierung kopiert, nicht referenziert ...

Wenn Sie wirklich schnell sein würden, könnten Sie überprüfen, ob du könntest es in der Konsole von 12 auf 123 ändern ;-)

Answer 3

Du solltest keydown aber keypress nicht verwenden. Dann erhalten Sie den tatsächlichen Zeichencode des zu typisierenden Zeichens.

Siehe keypress, keydown, keyup value of input box AFTER event, http://www.quirksmode.org/dom/events/keys.html und besonders http://www.quirksmode.org/js/keys.html.

inputElement.addEventListener("keypress", function(e) { 
    var curval = e.srcElement.value; 
    var newchar = String.fromCharCode(e.charCode || e.keyCode); 
    if (/* condition */) 
     e.preventDefault(); 
}, false); 

Wenn Sie nur den Eingangswert erhalten wollen, nachdem etwas eingegeben wird, müssen Sie die keyup Ereignis verwenden.