sự kiện phím tắt giá trị mới

Question

Trình duyệt: Google Chrome V19.0.1084.52

Tôi có hộp văn bản cần số nhỏ hơn hoặc bằng 255, khi nhấn phím Tôi muốn kiểm tra xem giá trị này có cao hơn hoặc bằng nhau không để 255 khác ngăn chặn sự kiện.

Trong Console khi tôi console.log các kiện nó sẽ hiển thị event.srcElement.value như giá trị sẽ xuất hiện tức là từ 12 => 123, khi tôi console.log chỉ event.srcElement.value nó sẽ hiển thị như là đầu vào, sẽ không được.

Console.log đang diễn ra một cái khác, không có gì ở giữa, không có tạm dừng.

Làm cách nào tôi có thể tìm thấy giá trị mới của hộp văn bản sẽ bị khóa và tại sao console.log trả về các kết quả khác?

Cảm ơn

Dưới đây là mã của tôi:

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

Tôi không chắc chắn nếu nó có thể được giúp đỡ bất kỳ, nhưng khi tôi phải đối phó với wit ha tình huống tương tự trong một người nghe sự kiện tôi đã sử dụng setTimeout() với thời gian chờ 1ms, nơi tôi đặt chức năng chính kiểm tra giá trị, v.v.

Đó là vì khi sự kiện keydown được kích hoạt, trường nhập chưa được điền dữ liệu.

Simple jQuery dụ:

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

CẬP NHẬT

Sử dụng 'đầu vào' sự kiện trong các trình duyệt hiện đại.

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

Điều duy nhất tôi có thể đưa ra là các đối tượng srcElement được outputted trong giao diện điều khiển vẫn còn liên kết với đối tượng sự kiện, ngay cả sau khi tổ chức sự kiện KeyDown để các đối tượng trong giao diện điều khiển được cập nhật từ 12 đến 123 ngay cả khi đã có trong bảng điều khiển.

Nó không xảy ra với sản lượng trực tiếp của event.srcElement.value bởi vì đó là một giá trị văn chương và được sao chép vào khai thác gỗ, không được tham chiếu ...

Nếu bạn sẽ thật nhanh bạn có thể kiểm tra xem bạn có thể thấy thay đổi trong Bảng điều khiển từ 12 đến 123 ;-)

Answer 3

Bạn không nên sử dụng keydown nhưng keypress. Sau đó, bạn sẽ nhận được mã ký tự thực tế của char cần gõ.

Xem keypress, keydown, keyup value of input box AFTER event, http://www.quirksmode.org/dom/events/keys.html và đặc biệt là 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); 

Nếu bạn chỉ muốn nhận giá trị đầu vào sau khi nhập nội dung nào đó, bạn cần sử dụng sự kiện keyup.