en el cambio sin perder el foco?

Question

Estoy creando un formulario con un menú desplegable de selección. Una de las opciones es "otro - por favor especifique", que se supone que debe mostrar un campo de texto adicional para más detalles.

Logré hacerlo usando el evento onChange + alguna comprobación de valor simple (ya que no puedo confiar en la posición).

Comencé a probarlo y me di cuenta de que si bien funciona perfectamente cuando se utiliza un mouse (onChange se ejecuta después de que el control pierde el foco), no lo hace cuando uso el teclado (ya que aún no perdió el foco) - solo después de presionar la tecla "tab" aparecen los cambios (que se ven raros).

Me parece que me falta algo obvio, busqué otros eventos y lo más parecido que he encontrado es hacer clic, pero tampoco lo es.

Entonces la pregunta es, ¿hay una mejor manera de resolver esto?

Answer 1

This article podría ayudarlo. Utiliza trucos de este modo:

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

No es bonito, pero ese es el problema con el uso de la función onchange en un menú desplegable. La otra solución sería una función que verifica el valor del menú desplegable de vez en cuando y llama a la función onchange si cambia.

Mirar hacia arriba tutoriales de esta manera: 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); 

Hay también una manera de jQuery si se puede mirar hacia arriba

Answer 2

Usted puede simplemente añadir esto a la <select> etiqueta:

onkeyup="this.onchange();" 

Answer 3

onkeyup = "this.onchange(); pero el evento de keyup puede activarse si no hay cambios

Answer 4

Ejemplos de uso de angulares y jQuery se puede lograr esto como desee,

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