onchange senza perdere la concentrazione?

Question

Sto creando un modulo con un menu a discesa Seleziona. Una delle opzioni è "altro - per favore specificare", che dovrebbe visualizzare un campo di testo extra per maggiori dettagli.

Sono riuscito a farlo utilizzando l'evento onChange + qualche semplice controllo del valore (poiché non posso fare affidamento sulla posizione).

Ho iniziato a testarlo e ho capito che mentre funziona perfettamente quando si utilizza un mouse (onChange viene eseguito dopo che il controllo perde lo stato attivo), non lo fa quando utilizzo la tastiera (poiché non ha ancora perso la messa a fuoco) - solo dopo aver premuto tab vengono visualizzate le modifiche (che sembrano strane).

Mi sembra che mi manchi qualcosa di ovvio, ho cercato altri eventi e il più vicino che ho trovato è onclick, ma non è neanche quello.

Quindi la domanda è, c'è un modo migliore per risolvere questo?

Answer 1

This article potrebbe aiutarti. Esso utilizza trucchi in questo 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; 

Non è bello, ma questo è il problema con l'utilizzo della funzione di onchange su un menu a discesa. L'altra soluzione sarebbe una funzione che verifica ogni tanto il valore del menu a discesa e chiama la funzione onchange se cambia.

Guardi su tutorial come questo: 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); 

C'è anche un modo jQuery se si può guardare in su

Answer 2

Si può semplicemente aggiungere questo al <select> tag:

onkeyup="this.onchange();" 

Answer 3

onkeyup = "this.onchange(); ma l'evento keyup potrebbe scoppiare se non ci sono cambiamenti

Answer 4

Esempi di utilizzo angolare e jQuery è possibile raggiungere questo obiettivo come si desidera,

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