Обнаружение измененного текстового поля ввода
Я просмотрел множество других вопросов и нашел очень простые ответы, включая приведенный ниже код. Я просто хочу определить, когда кто-то изменяет содержимое текстового поля, но по какой-то причине он не работает... Я не получаю ошибок консоли. Когда я устанавливаю точку останова в браузере в change()
функция он никогда не попадает в него.
$('#inputDatabaseName').change(function () {
alert('test');
});
<input id="inputDatabaseName">
8 ответов
можно использовать oninput
событие, как в jQuery, как это:
$('#inputDatabaseName').on('input',function(e){
alert('Changed!')
});
в чистом JavaScript
document.querySelector("input").addEventListener("change",function () {
alert("Input Changed");
})
или такой:
<input id="inputDatabaseName" onchange="youFunction();"
onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"/>
попробуйте keyup вместо изменения.
<script type="text/javascript">
$(document).ready(function () {
$('#inputDatabaseName').keyup(function () { alert('test'); });
});
</script>
в каждом ответе отсутствуют некоторые моменты, поэтому вот мое решение:
$("#input").on("input", function(e) {
var input = $(this);
var val = input.val();
if (input.data("lastval") != val) {
input.data("lastval", val);
//your change action goes here
console.log(val);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">
<p>Try to drag the letters and copy paste</p>
на Input Event
пожары на клавиатура ввод Перетащить Мышкой, автозаполнение и Копировать-Вставить протестировано на Chrome и Firefox.
Проверка на Предыдущее значение позволяет обнаружить реальные изменения, что означает не срабатывание при вставке одной и той же вещи или вводе одного и того же символа или т. д.
рабочий пример: http://jsfiddle.net/g6pcp/473/
обновление:
и если вы хотите запустить свой change function
только когда пользователь заканчивает печатать и предотвратить запуск действия изменения несколько раз, вы можете попробовать это:
var timerid;
$("#input").on("input", function(e) {
var value = $(this).val();
if ($(this).data("lastval") != value) {
$(this).data("lastval", value);
clearTimeout(timerid);
timerid = setTimeout(function() {
//your change action goes here
console.log(value);
}, 500);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">
если пользователь начинает печатать (например, "foobar"), этот код предотвращает ваш change action
для запуска для каждого типа письма пользователя и и запускается только тогда, когда пользователь перестает печатать, Это хорошо специально для того, когда вы отправляете входные данные на сервер (например, поисковые входы), таким образом сервер делает единственный искать foobar
а не шесть поисков f
а то fo
а то foo
и foob
и так далее.
onkeyup, onpaste, onchange, oninput
Кажется, не удается, когда браузер выполняет автозаполнение текстовых полей. Для обработки такого случая включите "autocomplete='off'
" в текстовом поле, чтобы предотвратить автозаполнение браузера в текстовом поле,
например,
<input id="inputDatabaseName" autocomplete='off' onchange="check();"
onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();" />
<script>
function check(){
alert("Input box changed");
// Things to do when the textbox changes
}
</script>
текстовые входы не стрелять change
событие, пока они не потеряют фокус. Нажмите за пределами ввода, и появится предупреждение.
Если обратный вызов должен сработать до того, как текстовый ввод потеряет фокус, используйте .keyup()
событие.
в моем случае, у меня есть TextBox, который был прикреплен к меню выбора даты. Единственным решением, которое сработало для меня, было обработать его внутри события onSelect datepicker.
<input type="text" id="bookdate">
$("#bookdate").datepicker({
onSelect: function (selected) {
//handle change event here
}
});
Я думаю, вы можете использовать keydown
тоже:
$('#fieldID').on('keydown', function (e) {
//console.log(e.which);
if (e.which === 8) {
//do something when pressing delete
return true;
} else {
//do something else
return false;
}
});
работает:
$("#ContentPlaceHolder1_txtNombre").keyup(function () {
var txt = $(this).val();
$('.column').each(function () {
$(this).show();
if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) == -1) {
$(this).hide();
}
});
//}
});