evento KeyDown nuevo valor

Question

navegador: Google Chrome V19.0.1084.52

Tengo un cuadro de texto que debe ser un número menor o igual a 255, en keydown Quiero comprobar si este valor es superior o igual a 255 más prevenir el evento.

En la consola cuando console.log la evento se mostrará event.srcElement.value como el valor aparecerá es decir, desde 12 => 123, cuando console.log simplemente event.srcElement.value se mostrará como la entrada fue, no será.

Console.log están sucediendo uno detrás del otro, nada en el medio, sin pausas.

¿Cómo puedo saber cuál será el nuevo valor de un cuadro de texto en la clave y por qué el console.log arroja resultados diferentes?

Gracias

Aquí está mi código:

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

No estoy seguro de si pudiera ser de alguna ayuda, pero cuando tuve que tratar con ingenio ja situación similar en un detector de eventos que utiliza un setTimeout() con 1 ms de tiempo de espera donde pongo la funcionalidad principal comprobación de valor, etc.

Eso es porque cuando se dispara el evento keydown el campo de entrada aún no se rellena con el nuevo datos.

jQuery ejemplo simple:

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

ACTUALIZACIÓN

Uso evento 'entrada' en los navegadores modernos.

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

La única cosa que puedo llegar a es que el objeto srcElemento que se emite en la consola todavía está ligado al objeto de evento, incluso después de que el evento KeyDown para que el objeto de la consola se actualiza desde el 12 a 123 incluso cuando ya está en la consola.

Esto no sucede con la salida directa de event.srcElement.value porque es un valor literal y se copia en el registro, no se hace referencia ...

Si quieres ser muy rápido podrías comprobar si puede verlo cambiar en la consola de 12 a 123 ;-)

Answer 3

No debe usar keydown sino keypress. A continuación, recibirá el código de carácter real del carácter a ser tipeado.

Ver keypress, keydown, keyup value of input box AFTER event, http://www.quirksmode.org/dom/events/keys.html y especialmente 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); 

Si lo que desea es obtener el valor de entrada después de que algo se escribe, es necesario utilizar el evento keyup.