onchange bez utraty ostrości?

Question

Tworzę formularz z rozwijanym menu wyboru. Jedną z opcji jest "other - please specify", która ma wyświetlać dodatkowe pole tekstowe, aby uzyskać więcej szczegółów.

Udało mi się to zrobić za pomocą zdarzenia onChange + pewna prosta kontrola wartości (ponieważ nie mogę polegać na pozycji).

Zacząłem go testować i zdałem sobie sprawę, że podczas gdy działa doskonale, gdy używa się myszy (zmiana OnChange jest wykonywana po tym, jak kontrolka traci ostrość), nie działa, gdy używam klawiatury (ponieważ nie utraciło to jeszcze ostrości) - dopiero po naciśnięciu przycisku pojawiają się zmiany (co wygląda dziwnie).

Wydaje mi się, że brakuje mi czegoś oczywistego, szukałem innych wydarzeń, a najbliższe, które znalazłem, to onclick, ale to też nie jest.

Pytanie brzmi, czy istnieje lepszy sposób na rozwiązanie tego problemu?

Answer 1

This article może ci pomóc. Używa takich sztuczek:

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

To nie jest ładne, ale to jest problem z użyciem funkcji onchange na liście rozwijanej. Drugim rozwiązaniem byłaby funkcja sprawdzania wartości rozwijanej co jakiś czas i wywoływania funkcji onchange, gdyby została zmieniona.

Spójrz tutoriale tak: 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); 

Jest również sposobem jQuery jeśli można to sprawdzić

Answer 2

można po prostu dodać to do <select> tagu:

onkeyup="this.onchange();" 

Answer 3

onkeyup = "this.onchange(); , ale zdarzenie keyup może zostać wywołane, jeśli nie ma zmiany

Answer 4

Przykłady użycia kanciasty i jQuery można osiągnąć to, jak chcesz,

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