Событие Javascript, которое запускается без взаимодействия с пользователем? - PullRequest
Новая
       10

Событие Javascript, которое запускается без взаимодействия с пользователем?

2 голосов
/ 26 февраля 2009

Текстовое поле в моей форме может меняться в зависимости от того, что выбрано в различных выпадающих списках.

Есть ли способ вызвать функцию javascript при изменении значения текстового поля?

Пробное событие обмена, но, похоже, это работает, только если пользователь вручную изменяет значение текстового поля.

Приветствия

Breandán

Ответы [ 7 ]

7 голосов
/ 26 февраля 2009

Нет, инициируемые JavaScript изменения элементов формы не вызывают события. Если они это сделают, это вызовет всевозможные рекурсивные бесконечные циклы.

Простое решение состоит в том, чтобы вызывать вашу функцию onchange каждый раз, когда вы изменяете значение текстового поля, однако вы также можете использовать некоторую функцию-обертку. Как очень простой пример: 

function updateTextField(new_text) {
  text_field.value = new_text;
  text_field.onchange();
}
2 голосов
/ 26 февраля 2009

Попробуйте отключить логику, отвечающую за изменение значения элемента управления, от пути выполнения события 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 голосов
/ 26 февраля 2009

При настройке содержимого текстового поля из вашего JS-кода вызывайте другую функцию, передавая текст для установки, затем вы можете вызывать его из любого места и выполнять свою логику.

1 голос
/ 26 февраля 2009

В веб-браузерах программные изменения в элементе управления не будут вызывать события для этого элемента управления. Вы должны указать коду, который изменяет значение текстового поля, вызывать событие onchange. Вот как вы можете сделать это простым JavaScript: 

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

Конечно, использование библиотеки, такой как jQuery, делает ее проще и надежнее: 

$("#boxId").val("Abc").change();
1 голос
/ 26 февраля 2009

Вы можете использовать отличный event.simulate.js , чтобы сделать это. Этот скрипт зависит от библиотеки 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(), я бы не рекомендовал делать это, так как это делает ваш код менее гибким. При присоединении событий onChange к текстовому полю они не будут срабатывать при ручном вызове события change (). При использовании вышеуказанного метода события будут распространяться так же, как если бы это событие было инициировано пользователем.

0 голосов
/ 26 февраля 2009

Я бы рекомендовал просмотреть пользовательские события YUI для примера: Пример пользовательского события YUI Link

Все, что вам нужно, это прикрепить этот скрипт с манипуляциями с событиями 

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

и тогда вы сможете использовать пользовательские события (везде в HTML) fnSubscriberChange - внутри этого Func вы можете делать все, что захотите. Здесь вы можете поместить логику изменения значения вашего текстового поля и зависеть от значения поля «Измененное выделение» - вызвать нужную функцию. Логика, которая зависит от прослушивания событий, ясна и легко модифицируема; Библиотека YUI поддерживает все браузеры, поэтому не стоит забывать о функциях браузеров.

Текстовое поле и поля выбора: 

 <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>
    (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 голосов
/ 26 февраля 2009

Предполагая, что интерфейс в HTML:

Вы можете установить обратный вызов тайм-аута и запросить содержимое текстового поля, скажем, с интервалом в 100 мсек, и сравнить его с некоторым предыдущим значением, которое вы храните в переменной.

Ключевые слова: window.setTimout (), window.setInterval ()

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...