堆棧內存溢出
  簡體   English   中英

在沒有用戶交互的情況下觸發的Javascript事件？

[英]Javascript event that fires without user interaction?

 原文  2009-02-26 12:10:40  0   7    javascript/ events

問題描述

我的表單上的文本框可能會更改，具體取決於在各種下拉列表中選擇的內容。

有沒有辦法在文本框值更改時調用javascript函數？

嘗試onchange事件，但只有當用戶手動更改文本框值時，這似乎才有效。

干杯，

Breandán

7 個解決方案

解決方案1
 7 已采納  2009-02-26 12:17:19

不，javascript觸發的表單元素更改不會觸發事件。 如果他們這樣做，這將導致各種遞歸無限循環。

簡單的解決方案是在更改文本框的值時手動調用onchange函數，但是您也可以使用某種包裝函數。 作為一個非常基本的例子： 

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

解決方案2
 2  2009-02-26 12:15:39

從JS代碼設置文本框的內容時，調用傳入要設置的文本的另一個函數，然后可以從需要的地方調用它，然后執行邏輯。

解決方案3
 2  2009-02-26 12:17:49

嘗試使用setTimeout斷開負責從onchange事件的執行路徑更改控件值的邏輯。 

<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事件中更改文本框值

解決方案4
 1  2009-02-26 12:21:56

您可以使用優秀的event.simulate.js來執行此操作。 但是，此腳本確實依賴於Prototype.js庫。

如果您不想依賴外部庫而想fireEvent ，請查看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');

這里提出了一個類似的問題： 用Prototype觸發一個事件 。

編輯：雖然可以使用document.getElementById('myTextbox').change() ，我不建議這樣做，因為它會使你的代碼不那么靈活。 將onChange事件附加到文本框時，手動調用change（）事件時不會觸發這些事件。 使用上述方法，事件將傳播，就像事件是用戶觸發的事件一樣。

解決方案5
 1  2009-02-26 12:27:07

在Web瀏覽器中，控件上的編程更改不會觸發該控件上的事件。 您必須指示更改文本框值的代碼才能觸發onchange事件。 這是你如何在普通的javascript中做到這一點： 

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

當然，使用像jQuery這樣的庫可以使它更容易，更健壯： 

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

解決方案6
 0  2009-02-26 12:15:38

假設前端是html：

您可以安裝一個timout回調並以100msecs的間隔查詢文本框的內容，並將其與存儲在變量中的某個先前值進行比較。

關鍵字：window.setTimout（），window.setInterval（）

解決方案7
 0  2009-02-26 13:57:43

我建議查看YUI的自定義事件示例： YUI自定義事件示例鏈接

您只需要將此腳本與事件操作相關聯即可 

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

然后你就可以使用自定義事件（HTML中的任何地方）fnSubscriberChange - 在這個Func中你可以做任何你想做的事情。 您可以將文本框更改值邏輯放在此處，並依賴於Changed Select框值 - 調用所需的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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 javascript點擊事件處理程序在不點擊的情況下觸發 用戶發表評論后，Facebook JavaScript SDK中是否有事件觸發？ 用戶互動的超級事件 沒有用戶交互，有沒有辦法在iBooks中運行javascript？ 使用ajax的Javascript上傳圖片，無需用戶交互 JavaScript - 兩個用戶代理是否可以在沒有服務器交互的情況下進行通信？ 試圖讓我的按鈕更改文本而無需用戶交互javascript 嘗試兩個下載鏈接，而無需用戶使用Javascript或HTML5進行交互 Typescript / Javascript無需用戶交互即可加載現有文件 無需用戶交互即可將文件 url 鏈接復制到剪貼板的 Javascript
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM