onchange без потери фокуса?

Question

Я создаю форму с выпадающим списком. Один из вариантов - «другое - укажите, пожалуйста», который должен отображать дополнительное текстовое поле для более подробной информации.

Мне удалось это сделать, используя onChange event + некоторую простоту проверки значения (поскольку я не могу положиться на позицию).

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

Мне кажется, что мне не хватает чего-то очевидного, я искал другие события, и ближайший я нашел onclick, но это тоже не так.

Итак, вопрос в том, есть ли лучший способ решить это?

Answer 1

This article может вам помочь. Он использует трюки, как так:

// executes an onchange function after 750ms (or specified delay) 
function safeOnChange1(code, delay) { 
    delay = delay || 750; 
    window.clearTimeout(soc_id); 
    soc_id = window.setTimeout(code, delay); 
} 
// global timer ID for the safeOnChange1 function. 
var soc_id = null; 

Это не красиво, но это проблема с использованием OnChange функции на выпадающем списке. Другим решением будет функция, проверяющая значение выпадающего меню каждый раз в то время и вызов функции onchange, если она изменилась.

Посмотрите учебники, как это: http://onlinetools.org/articles/unobtrusivejavascript/chapter4.html

function addEvent(obj, evType, fn){ 
if (obj.addEventListener){ 
    obj.addEventListener(evType, fn, false); 
    return true; 
} else if (obj.attachEvent){ 
    var r = obj.attachEvent("on"+evType, fn); 
    return r; 
} else { 
    return false; 
} 
} 
addEvent(window, 'load', foo); 
addEvent(window, 'load', bar); 

Там также JQuery образом, если вы можете посмотреть его

Answer 2

Вы можете просто добавить это к <select> тегу:

onkeyup="this.onchange();" 

Answer 3

onkeyup = "this.onchange(); но событие keyup может срабатывать, если нет изменений

Answer 4

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

$("#mytxt").on('keypress', function() { 
 
    console.log($("#mytxt").val()) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    Angular Example: <input type="text" ng-model="bad" ng-change="badri(bad)"/> 
 
    <br/> 
 
    jQuery Example: <input type="text" id="mytxt"> 
 
</div> 
 
<script> 
 
var app = angular.module("myApp", []); 
 
app.controller("myCtrl", function($scope) { 
 
    $scope.badri = function(v) { 
 
     console.log(v) 
 
    } 
 
}); 
 
</script>