переориентировать и выбрать содержимое поля ввода внутри события изменения

Question

У меня есть 3 поля ввода (id="qprice1", id="qprice2", id="prev_value"). если значение в #qprice2 меньше, чем #qprice1, мне нужно перефокусировать и выбрать все (выделить) содержимое #price2. но он продолжает фокусироваться на следующем элементе.

пока это мой код

$('body').on('change', '#qprice2', function(e) {
  e.preventDefault();
  var val1 = parseInt($('#qprice1').val().replace(/\D/g, ''));
  var val2 = parseInt($(this).val().replace(/\D/g, ''));
  if (val2 < val1) {
    alert('no reduction allowed!');
    $(this).val($('#prev_value'));
    $(this).focus().select();
  }
});

Использование таймаута также не работает:

setTimeout(function() { $(this).focus().select(); }, 100);

Я также сначала попытался сфокусироваться на другом элементе, но он тоже не сработал

$('#qprice1').focus();
$(this).focus().select();

но когда я пытаюсь сфокусироваться и выбрать другое поле ввода, оно работает нормально:

$('#another_input').val('2000').focus().select();

как мне добиться ожидаемого поведения? или это невозможно?

Answer 1

Похоже, вам просто нужно прикрепить обработчик событий к входу, а не к телу.

// handle click and add class
$('#qprice2').on('change keyup', function(e) {
var $t = $(this);
  e.preventDefault();
  clearTimeout(myvar);
  var myvar = setTimeout(function() {
    var val1 = parseInt($('#qprice1').val().replace(/\D/g, ''));
    var val2 = parseInt($t.val().replace(/\D/g, ''));
    if (val2 < val1) {
        $t.focus().val($('#prev_value').val()).select();
    }
  }, 1500);
});

https://jsfiddle.net/sgqv1ch2/