keydown घटना नया मान

Question

ब्राउज़र: गूगल क्रोम V19.0.1084.52

मैं एक पाठ बॉक्स जो एक संख्या से कम या keydown मैं जाँच करने के लिए चाहते हैं तो इस मूल्य से ऊपर या बराबर पर 255, के बराबर होने की जरूरत है है 255 अन्य घटना को रोकें।

कंसोल जब मैं घटना console.log यह event.srcElement.value दिखाएगा मूल्य 12 => 123 से अर्थात् दिखाई देगा के रूप में, जब मैं सिर्फ event.srcElement.value console.log यह दिखाएगा कि इनपुट था, नहीं होगा।

Console.log दूसरे के बाद एक हो रहा है, बीच में कुछ नहीं, कोई रोक नहीं है।

मुझे कैसे पता चलेगा कि टेक्स्टबॉक्स का नया मूल्य कुंजीडाउन पर होगा और console.log विभिन्न परिणामों को वापस क्यों कर रहा है?

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

मुझे यकीन है कि अगर यह कर सकता है नहीं कर रहा हूँ किसी भी मदद की हो, लेकिन जब मुझे बुद्धि का सामना करना पड़ा हा एक घटना श्रोता में इसी तरह की स्थिति मैं 1ms टाइमआउट जहाँ मैं मुख्य कार्यक्षमता मान को चेक कर दिया, आदि के साथ एक setTimeout() इस्तेमाल किया

है ऐसा इसलिए है क्योंकि जब keydown घटना निकाल दिया जाता है इनपुट क्षेत्र अभी तक नए के साथ तैयार नहीं हुआ है डेटा।

सरल jQuery उदाहरण:

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

अद्यतन

प्रयोग करें 'इनपुट' आधुनिक ब्राउज़रों में घटना।

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

केवल एक चीज मैं के साथ आ सकता है कि srcElement वस्तु है कि कंसोल में outputted है अभी भी घटना वस्तु से जुड़ा हुआ है, keydown घटना ताकि कंसोल में वस्तु 12 से अद्यतन किया जाता है के बाद भी है कंसोल में पहले से ही 123 तक।

यह event.srcElement.value के प्रत्यक्ष उत्पादन के साथ ऐसा नहीं होता है, क्योंकि वह एक शाब्दिक मूल्य है और प्रवेश, संदर्भित नहीं पर कॉपी किया जाता है ...

आप असली तेजी से होगा, तो आप अगर जांच कर सकता है आप इसे कंसोल में 12 से 123 तक बदल सकते हैं ;-)

Answer 3

आपको keydown लेकिन keypress का उपयोग नहीं करना चाहिए। फिर आपको चार-टाइप-टाइप किए गए वास्तविक वर्ण कोड प्राप्त होंगे।

keypress, keydown, keyup value of input box AFTER event, http://www.quirksmode.org/dom/events/keys.html और विशेष रूप से 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); 

तुम सिर्फ बाद कुछ लिखा गया इनपुट मूल्य प्राप्त करना चाहते हैं, तो आप keyup घटना का उपयोग करने की जरूरत है।