All geek questions in one place

Javascript event that fires without user interaction?

The text box in my form may vary depending on what is selected in the different drop-down lists.

Is there a way to call the javascript function when changing the value of a text field?

Listening for the onchange event, but this seems to work if the user manually changes the value of the text field.

Greetings

Breandán

+2
source share
7 answers

No, javascript-triggered changes to form elements do not raise events. If they did, it would cause all kinds of recursive infinite loops.

onchange , , . :

function updateTextField(new_text) {
  text_field.value = new_text;
  text_field.onchange();
}
+7

JS- , , , , .

+2

, onchange, 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>

OnChange

+2

event.simulate.js. script Prototype.js.

, , fireEvent createEvent. , :

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'));

event.simululate.js, :

Event.simulate('myTextbox', 'change');

: .

:, document.getElementById('myTextbox').change(), , . Change change(). , , .

+1

- . , , onchange. javascript:

var textbox = document.getElementById("boxId");
textbox.value = "Abc";
textbox.onchange();

, jQuery :

$("#boxId").val("Abc").change();
+1

, frontend html:

timout , , 100 , .

: window.setTimout(), window.setInterval()

0

YUI : YUI

, , script

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

and then you can use custom events (everywhere in HTML) fnSubscriberChange - inside this Func you can do whatever you want. You can put your logic for changing the text field here and depend on the value of the "Changed selection" field - call the desired function. The logic, which depends on listening to events, is understandable and easily modified; The YUI library supports all browsers, so you should not consider browser features.

Text field and selection fields:

 <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 for events:

<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>
0
source

Source: https://habr.com/ru/post/1716058/

More articles:


All Articles