onchange sans perdre le focus?

Question

Je crée un formulaire avec une liste déroulante. L'une des options est "other - please specify", qui est censée afficher un champ de texte supplémentaire pour plus de détails.

J'ai réussi à le faire en utilisant l'événement onChange + une simple vérification de la valeur (car je ne peux pas compter sur la position). J'ai commencé à le tester et j'ai réalisé que bien qu'il fonctionne parfaitement avec une souris (onChange s'exécute après que le contrôle ait perdu le focus), il ne fonctionne pas quand j'utilise le clavier (puisqu'il n'a pas encore perdu le focus) - seulement après que j'appuie sur l'onglet, les changements apparaissent (ce qui semble bizarre).

Il me semble qu'il me manque quelque chose d'évident, j'ai cherché d'autres événements et le plus proche que j'ai trouvé est onclick, mais ce n'est pas non plus. Donc, la question est, y at-il une meilleure façon de résoudre ce problème?

Answer 1

This article pourrait vous aider. Il utilise des trucs comme ceci:

// 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; 

Il est pas joli mais c'est le problème avec l'aide de la fonction onchange sur un menu déroulant. L'autre solution serait une fonction vérifiant la valeur de la liste déroulante de temps en temps et appelant la fonction onchange si elle changeait.

Regardez des tutoriels comme ceci: 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); 

Il y a aussi une façon jquery si vous pouvez le chercher

Answer 2

Vous pouvez simplement ajouter à la balise <select>:

onkeyup="this.onchange();" 

Answer 3

onkeyup = "this.onchange(); mais un événement de clé peut se déclencher s'il n'y a pas de changement

Answer 4

Exemples d'utilisation angulaire et jquery vous pouvez réaliser ce que vous voulez,

$("#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>