onchange ohne Fokus zu verlieren?

Question

Ich erstelle ein Formular mit einem Dropdown-Menü. Eine der Optionen ist "Andere - bitte angeben", die ein zusätzliches Textfeld für weitere Details anzeigen soll.

Ich schaffte es mit OnChange-Ereignis + einige einfache Wertüberprüfung (wie ich kann nicht auf die Position verlassen).

Ich begann es zu testen und erkannte, dass, während es perfekt funktioniert, wenn eine Maus verwendet (onChange wird ausgeführt, nachdem die Steuerung den Fokus verliert), nicht wenn ich die Tastatur benutze (da es den Fokus noch nicht verloren hat) - Erst nachdem ich die Tabulatortaste gedrückt habe, erscheinen die Änderungen (was komisch aussieht).

Es scheint mir, als ob ich etwas offensichtlich fehlen würde, suchte ich nach anderen Ereignissen und das nächste, was ich gefunden habe, ist onclick, aber das ist es auch nicht.

Die Frage ist also, gibt es eine bessere Möglichkeit, dies zu lösen?

Answer 1

This article könnte Ihnen helfen. Es nutzt Tricks wie so:

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

es nicht schön ist, aber das ist das Problem mit der Onchange Funktion auf einem Drop-Down verwenden. Die andere Lösung wäre eine Funktion, die ab und zu den Wert des Dropdowns überprüft und die onchange-Funktion aufruft, wenn sie sich ändert.

nachschlagen Tutorials wie folgt aus: 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); 

Es gibt auch eine jquery Art und Weise, wenn Sie es nach oben schauen können

Answer 2

Sie können einfach dies dem <select>-Tag hinzu:

onkeyup="this.onchange();" 

Answer 3

onkeyup = "this.onchange(); aber Keyup-Ereignis kann ausgelöst werden, wenn es keine Änderung gibt

Answer 4

Beispiele Winkel- und jquery Verwenden Sie dies erreichen können, wie Sie wollen,

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