Une zone de texte sur mon formulaire peut changer en fonction de ce qui est sélectionné dans diverses listes déroulantes.Evénement Javascript qui se déclenche sans intervention de l'utilisateur?
Y at-il un moyen d'appeler une fonction javascript lorsque la valeur de la zone de texte change?
Événement onchange essayé, mais cela ne semble fonctionner que si un utilisateur modifie manuellement la valeur de la zone de texte.
Cheers,
Breandán
Non, les modifications déclenchées par javascript dans les éléments de formulaire ne déclenchent pas d'événements. Si c'était le cas, cela provoquerait toutes sortes de boucles infinies récursives.
La solution simple consiste à appeler votre fonction onchange manuellement chaque fois que vous modifiez la valeur de la zone de texte, mais vous pouvez également utiliser une sorte de fonction wrapper. A titre d'exemple très basique:
function updateTextField(new_text) {
text_field.value = new_text;
text_field.onchange();
}
En supposant que le frontend est en html:
Vous pouvez installer un rappel timout et interroger le contenu de la zone de texte à des intervalles de, disons, 100msecs et le comparer à une valeur précédente que vous stockez dans une variable.
Mots-clés: window.setTimout(), window.setInterval()
Lors de la définition du contenu de la zone de texte à partir de votre code JS, appelez à une autre fonction qui passe dans le texte pour définir, vous pouvez appeler d'où vous avez besoin et faites votre logique alors.
Essayez de déconnecter la logique responsable de changer la valeur de la commande à partir du chemin d'exécution de l'événement onchange à l'aide d'un setTimeout.
<html>
<head>
<script type="text/javascript">
function setValue(target) {
alert("changed - value: " + target.value);
setTimeout("reallySetValue('" + target.id + "');", 1);
}
function reallySetValue(id) {
var control = document.getElementById(id);
control.value += control.value;
}
</script>
</head>
<body>
<form>
<div>
Enter "a" here:
<input type="text" id="test" onchange="setValue(this)">
<br/>
<br/>
<input type="text">
</div>
</form>
</body>
</html>
Il est illustré ici Changing a Textbox Value in its OnChange Event
Vous pouvez utiliser l'excellent event.simulate.js pour le faire. Cependant, ce script dépend de la bibliothèque Prototype.js.
Si vous voulez faire cela sans compter sur une bibliothèque externe, jetez un oeil à la fireEvent et createEvent fonctions. Une simple démonstration de la façon dont vous pourriez mettre en œuvre ceci:
function triggerEvent(element, eventName)
{
if (document.createEvent)
{
var evt = document.createEvent('HTMLEvents');
evt.initEvent(eventName, true, true);
return element.dispatchEvent(evt);
}
if (element.fireEvent)
return element.fireEvent('on' + eventName);
}
triggerEvent(document.getElementById('myTextbox', 'change'));
En utilisant event.simululate.js, vous feriez comme ceci:
Event.simulate('myTextbox', 'change');
A a été posée ici question similaire: Trigger an event with Prototype.
EDIT: Bien qu'il soit possible d'utiliser document.getElementById('myTextbox').change(), je ne le recommanderais pas car cela rendrait votre code moins flexible. Lorsque vous attachez des événements onChange à la zone de texte, ils ne se déclenchent pas lors de l'appel manuel de l'événement change(). En utilisant la méthode ci-dessus, les événements se propageront, comme si l'événement était déclenché par l'utilisateur.
Dans les navigateurs Web, les modifications programmatiques sur un contrôle ne déclenchent pas les événements sur ce contrôle. Vous devez indiquer au code qui modifie la valeur de la zone de texte pour déclencher l'événement onchange. Voici comment vous pouvez le faire en javascript plaine:
var textbox = document.getElementById("boxId");
textbox.value = "Abc";
textbox.onchange();
Bien sûr, en utilisant une bibliothèque comme jQuery rend plus facile et plus robuste:
$("#boxId").val("Abc").change();
Je vous recommande de regarder par-dessus les événements personnalisés de YUI pour l'exemple: YUI Custom Event Example Link
Tout ce que vous avez besoin est d'attacher ce script avec des manipulations Evénements
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
puis vous êtes en mesure d'utiliser des événements personnalisés (partout en HTML) fnSubscriberChange - dans ce Func vous pouvez faire ce que vous voulez. Vous pouvez mettre ici votre logique de modification de la zone de texte et dépendez de la valeur de la boîte de sélection modifiée - appelez la fonction désirée. La logique qui dépend de l'écoute des événements est claire et facile à modifier; La bibliothèque YUI prend en charge tous les navigateurs, donc vous ne devriez pas vous soucier des fonctionnalités des navigateurs.
zone de texte et sélectionnez: boîtes
<input type='text' id='id_text_fld' value=''/>
<select id='id_sel_one'>
<option value="test1">Test1
<option value="test2">Test2
</select>
<select id='id_sel_two'>
<option value="test3">Test3
<option value="test4">Test4
</select>
Script pour des événements:
<script>
(function() {
//create a new custom event, to be fired
var onChangeValue = new YAHOO.util.CustomEvent("onChangeValue");
// Attach change event listener for Select boxes by their IDs
YAHOO.util.Event.on(['id_sel_one', 'id_sel_two'], 'change', fnCallback, this);
// Function to call when Change event on Select occures
fnCallback = function(e) {
alert("This elem:" + this.id+ " changed value to:" + this.value);
// Fire our Custom event
onChangeValue.fire({dom_el: this}); // passing select box element [this] to function
}
// Listen for Custom event and call our Func
onChangeValue.subscribe(fnSubscriberChange); // Lets listen for ChangeValue event and call our Func
fnSubscriberChange = function(type, args) {
alert("Event type:" + type + " dom el id:" + args[0].dom_el.id);
var dom_el = args[0].dom_el; // Select Box that produces Change
};
})();
</script>