Вопрос по javascript – событие нажатия клавиши новое значение

8

Браузер: Google Chrome V19.0.1084.52

У меня есть текстовое поле, которое должно быть числом, меньшим или равным 255, при нажатии клавиш я хочу проверить, является ли это значение выше или равным 255, иначе предотвратить событие.

В консоли, когда я console.logмероприяти это покажет Event.srcElement.value в качестве значения появится то есть от 12 => 123, когда я console.log просто Event.srcElement.value будет отображаться как вход был, а не будет.

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
Интересный вопрос, у тебя есть тестовый код? Willem Mulder
Добавлен оригинальный код William Isted
Хмм, не должно быть никаких различий. JsFiddle поможет ..! Willem Mulder

Ваш Ответ

4   ответа
10

keydown ноkeypress. Затем вы получите реальный код символа для набираемого символа.

Видетьkeypress, keydown, keyup значение поля ввода ПОСЛЕ события, http: //www.quirksmode.org/dom/events/keys.htm и особенноhttp: //www.quirksmode.org/js/keys.htm.

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

Если вы просто хотите получить входное значение после того, как что-то напечатано, вам нужно использоватьkeyup мероприятие

Я думаю, что задача состоит в том, чтобы создать новое значение из curval и newchar. Blago
На самом деле, это curval и newkey - так что да, это проблема. Bergi
keypress и keyup не позволяют вам «отменить» ключевое событие. Trevor
keypress также срабатывает, если я нажимаю клавишу Backspace в Firefox. Что может быть не тем, что вы хотите. Pieter
0

что я могу придумать, это то, что объект srcElement, который выводится в консоли, все еще связан с объектом события, даже после события keydown, так что объект в консоли обновляется с 12 до 123, даже когда он уже находится в консоль.

Этого не происходит с прямым выводом event.srcElement.value, потому что это буквальное значение, которое копируется при ведении журнала, а не на него ссылаются ...

Если бы вы были очень быстрыми, вы могли бы проверить, можно ли увидеть, как они меняются в консоли с 12 на 123; -)

0

чтобы Включите выделение текста и позицию каретки, вы можете сделать это следующим образом:

inputElement.addEventListener("keypress", (event) => {
    let curval = event.srcElement.value;
    let newchar = String.fromCharCode(event.charCode || event.keyCode);
    let curval_arr = curval.split("");
    curval_arr.splice(event.target.selectionStart, (event.target.selectionEnd - event.target.selectionStart), newchar);
    let newval = curval_arr.join("");

    //TODO: your logic here with "newval" containing the value to be.
    //console.log(curval, newchar, newval);
    //event.preventDefault();
}, false);
24

что это могло бы помочь, но когда мне приходилось сталкиваться с подобной ситуацией в слушателе событий, я использовалsetTimeout() с таймаутом 1 мс, где я помещаю основную функциональность, проверяя значение и т. д.

Это потому, что ког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);
});

ОБНОВИТ

Используйте событие input в современных браузера

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();
  }
});
Кажется, чтобы делать именно то, что я хотел William Isted
@ WilliamIsted: Я уверен, что вам не нужно решение по тайм-ауту. Bergi
Спасибо @Кейн, я часами искал что-то подобное. Это сработало отлично! yourdeveloperfriend
Какfield.val() равно как предыдущему, так и новому значению? Petrus Theron
var prevValue = field.val();а @ следуетif (field.val() >= ...) ..., что было бы эквивалентноif (prevValue >= 255) .... Petrus Theron

Похожие вопросы