Я пытаюсь получить текст в текстовом поле по мере того, как пользователь вводит его ( jsfiddle plays ):
function edValueKeyPress() {
var edValue = document.getElementById("edValue");
var s = edValue.value;
var lblValue = document.getElementById("lblValue");
lblValue.innerText = "The text box contains: " + s;
//var s = $("#edValue").val();
//$("#lblValue").text(s);
}
<input id="edValue" type="text" onKeyPress="edValueKeyPress()"><br>
<span id="lblValue">The text box contains: </span>
Код выполняется без ошибок, за исключением того, что значение в input text
поле, во время onKeyPress
всегда значения , прежде чем изменения:
Вопрос : Как получить текст текстового поля во время
onKeyPress
?
Бонусный чат
Есть три события, связанных с тем, что «пользователь вводит текст» в HTML DOM:
onKeyDown
onKeyPress
onKeyUp
В Windows порядок WM_Key
сообщений становится важным, когда пользователь удерживает клавишу, и клавиша начинает повторяться:
WM_KEYDOWN('a')
- пользователь толкнул вниз AключаWM_CHAR('a')
-a
персонаж получен от пользователяWM_CHAR('a')
-a
персонаж получен от пользователяWM_CHAR('a')
-a
персонаж получен от пользователяWM_CHAR('a')
-a
персонаж получен от пользователяWM_CHAR('a')
-a
персонаж получен от пользователяWM_KEYUP('a')
- пользователь отпустил Aключ
В результате в текстовом элементе управления появятся пять символов: aaaaa
Важным моментом является то, что вы отвечаете на WM_CHAR
сообщение, которое повторяется. В противном случае вы пропустите события при нажатии клавиши.
В HTML все немного иначе:
onKeyDown
onKeyPress
onKeyDown
onKeyPress
onKeyDown
onKeyPress
onKeyDown
onKeyPress
onKeyDown
onKeyPress
onKeyUp
Html поставляет KeyDown
и KeyPress
каждый ключ повторения. И KeyUp
событие возникает только тогда, когда пользователь отпускает клавишу.
Забрать
- Я могу ответить на
onKeyDown
илиonKeyPress
, но оба все еще возникают доinput.value
обновления - Я не могу ответить
onKeyUp
, потому что этого не происходит при изменении текста в текстовом поле.
Вопрос: Как мне получить текст текстового поля во время onKeyPress
?
Бонусное чтение
источник
onKeyUp
не показывает изменения в текстовом поле по мере их появления.Ответы:
Обработка
input
события является последовательным решением: оно поддерживается дляtextarea
иinput
элементов во всех современных браузерах , и это срабатывает точно , когда вам это нужно:function edValueKeyPress() { var edValue = document.getElementById("edValue"); var s = edValue.value; var lblValue = document.getElementById("lblValue"); lblValue.innerText = "The text box contains: " + s; }
<input id="edValue" type="text" onInput="edValueKeyPress()"><br> <span id="lblValue">The text box contains: </span>
Я бы немного переписал это:
function showCurrentValue(event) { const value = event.target.value; document.getElementById("lblValue").innerText = value; }
<input id="edValue" type="text" onInput="showCurrentValue(event)"><br> The text box contains: <span id="lblValue"></span>
источник
Будь проще. Используйте оба
onKeyPress()
иonKeyUp()
:<input id="edValue" type="text" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()">
Это обеспечивает получение самого обновленного строкового значения (после нажатия клавиши), а также обновляется, если пользователь удерживает клавишу.
jsfiddle: http://jsfiddle.net/VDd6C/8/
источник
onKeyUp
цели использованияonKeypress
), это самый простой, самый чистый и самый близкий ответ, который кто-либо увидит. Только самый внимательный пользователь заметит, что отзыв не соответствует введенному им.<input>
элемент в красный или зеленый цвет или давать пользователю какой-то другой отзыв о том, что то, что они набрали, хорошо или плохо. В то время как ваш общепринятый ответ по- прежнему страдает от проблемы всегда быть «вне по одному» характер: . Только самый наблюдательный пользователь заметит обратную связь не соответствует тому , что они вошли» В действительности, так как от каждого конкретного одна ошибка возникает только во время повторения нажатия клавиши (т.е. они удерживают клавишу), никто (кроме меня) не заметит проблемы.Это сделано специально: это позволяет прослушивателю событий отменить нажатие клавиши.
Если прослушиватель событий отменяет событие , значение не обновляется. Если событие не отменено, значение обновляется, но после вызова прослушивателя событий .
Чтобы получить значение после обновления значения поля, запланируйте запуск функции в следующем цикле событий. Обычный способ сделать это - позвонить
setTimeout
с таймаутом0
:$('#field').keyup(function() { var $field = $(this); // this is the value before the keypress var beforeVal = $field.val(); setTimeout(function() { // this is the value after the keypress var afterVal = $field.val(); }, 0); });
Попробуйте здесь: http://jsfiddle.net/Q57gY/2/
Изменить : некоторые браузеры (например, Chrome) не запускают события нажатия клавиш для возврата на место; изменено нажатие на клавиатуру в коде.
источник
держите его компактным.
Функция
edValueKeyPress()
вызывается каждый раз, когда вы нажимаете клавишу .Вы также объявили и инициализировали некоторые переменные в этой функции, которые замедляют процесс и требуют больше ЦП и памяти.
Вы можете просто использовать этот код, полученный путем простой подстановки.
function edValueKeyPress() { document.getElementById("lblValue").innerText =""+document.getElementById("edValue").value; }
Это все, что вам нужно, и это быстрее!
источник
<asp:TextBox ID="txtMobile" runat="server" CssClass="form-control" style="width:92%; margin:0px 5px 0px 5px;" onkeypress="javascript:return isNumberKey(event);" MaxLength="12"></asp:TextBox> <script> function isNumberKey(evt) { var charCode = (evt.which) ? evt.which : event.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)) { return false; } return true; } </script>
источник
Ни один из ответов пока не предлагает полного решения. Необходимо решить несколько вопросов:
keydown
иkeypress
обработчики (например , Backspace и удалять ключи подавляются некоторыми браузерами).keydown
- не лучшая идея. Бывают ситуации, когда нажатие клавиши НЕ приводит к нажатию клавиши!setTimeout()
решения стиля задерживаются в веб-браузерах Google Chrome / Blink до тех пор, пока пользователь не перестанет печатать.Более правильное решение справится с
keypress
,keyup
,input
иchange
событие.Пример:
<p><input id="editvalue" type="text"></p> <p>The text box contains: <span id="labelvalue"></span></p> <script> function UpdateDisplay() { var inputelem = document.getElementById("editvalue"); var s = inputelem.value; var labelelem = document.getElementById("labelvalue"); labelelem.innerText = s; } // Initial update. UpdateDisplay(); // Register event handlers. var inputelem = document.getElementById("editvalue"); inputelem.addEventListener('keypress', UpdateDisplay); inputelem.addEventListener('keyup', UpdateDisplay); inputelem.addEventListener('input', UpdateDisplay); inputelem.addEventListener('change', UpdateDisplay); </script>
Скрипка:
http://jsfiddle.net/VDd6C/2175/
Обработка всех четырех событий охватывает все крайние случаи. При работе с вводом от пользователя следует учитывать все типы методов ввода, а также проверять кроссбраузерность и функциональность различных устройств. Приведенный выше код был протестирован в Firefox, Edge и Chrome на компьютере, а также на мобильных устройствах, которыми я владею.
источник
input
мероприятие?input
не всегда срабатывает. Ни одно событие не охватывает все ситуации.keypress
в ответеОбычно я связываю значение поля (то есть до его обновления) с ключом, связанным с ключевым событием. Ниже используется недавний JS, поэтому потребуется настройка поддержки в старых IE.
Недавний пример JS
document.querySelector('#test').addEventListener('keypress', function(evt) { var real_val = this.value + String.fromCharCode(evt.which); if (evt.which == 8) real_val = real_val.substr(0, real_val.length - 2); alert(real_val); }, false);
Пример поддержки старых IE
//get field var field = document.getElementById('test'); //bind, somehow if (window.addEventListener) field.addEventListener('keypress', keypress_cb, false); else field.attachEvent('onkeypress', keypress_cb); //callback function keypress_cb(evt) { evt = evt || window.event; var code = evt.which || evt.keyCode, real_val = this.value + String.fromCharCode(code); if (code == 8) real_val = real_val.substr(0, real_val.length - 2); }
[РЕДАКТИРОВАТЬ - этот подход по умолчанию отключает нажатие клавиш для таких вещей, как пробел, CTRL + A. Приведенный выше код подходит для первого, но потребует дополнительных усилий, чтобы учесть последнее и несколько других возможных ситуаций. См. Комментарий Яна Бойда ниже.]
источник
delete
клавиши, или если пользователь нажимает клавишу, которая не изменяет содержимое (Ctrl+A
), или если пользователь выбирает какой-то текст, а затем нажимаетa
для замены подмножества. Идея прекрасная, Утканос, но хрупкая.легко...
В обработчике события keyPress напишите
void ValidateKeyPressHandler(object sender, KeyPressEventArgs e) { var tb = sender as TextBox; var startPos = tb.SelectionStart; var selLen= tb.SelectionLength; var afterEditValue = tb.Text.Remove(startPos, selLen) .Insert(startPos, e.KeyChar.ToString()); // ... more here }
источник
e.KeyChar
этоBackspace
ключ? ИлиDelete
ключ? ИлиCtrl+A
?void
?object
? методы первого верхнего регистра?Итак, у каждого мероприятия есть свои преимущества и недостатки. События
onkeypress
иonkeydown
не получают последнее значение, иonkeypress
не запускаются для непечатаемых символов в некоторых браузерах. Вonkeyup
Событие не определяет , когда клавиша нажата в течение нескольких символов.Это немного взломано, но делать что-то вроде
function edValueKeyDown(input) { var s = input.value; var lblValue = document.getElementById("lblValue"); lblValue.innerText = "The text box contains: "+s; //var s = $("#edValue").val(); //$("#lblValue").text(s); }
<input id="edValue" type="text" onkeydown="setTimeout(edValueKeyDown, 0, this)" />
кажется, справляется с лучшим из миров.
источник
Используя event.key, мы можем получить значения до ввода в текстовое поле ввода HTML. Вот код.
function checkText() { console.log("Value Entered which was prevented was - " + event.key); //Following will prevent displaying value on textbox //You need to use your validation functions here and return value true or false. return false; }
<input type="text" placeholder="Enter Value" onkeypress="return checkText()" />
источник
Попробуйте связать charCode события с полученным значением. Вот пример моего кода:
<input type="text" name="price" onkeypress="return (cnum(event,this))" maxlength="10"> <p id="demo"></p>
js:
function cnum(event, str) { var a = event.charCode; var ab = str.value + String.fromCharCode(a); document.getElementById('demo').innerHTML = ab; }
Значение in
ab
получит последнее значение в поле ввода.источник
Есть способ лучше. Используйте метод concat. пример
объявить глобальную переменную. это хорошо работает на angular 10, просто передайте его Vanilla JavaScript. Пример:
HTML
<input id="edValue" type="text" onKeyPress="edValueKeyPress($event)"><br> <span id="lblValue">The text box contains: </span>
КОД
emptyString = '' edValueKeyPress ($event){ this.emptyString = this.emptyString.concat($event.key); console.log(this.emptyString); }
источник
Delete
,Ctrl
+X
,Ctrl
+V
,Backspace
? Или, если они выбрали какой-то текст, а затем нажмитеA
?