使用 javascript 為 web 元素調用 HTML DOM 中的 EventListener

Question

在網頁中，我有一個輸入框，如下所示：

<input id="userId-inputEl" type="text" size="1" name="userId" placeholder="Enter Agent UserID..." style="width:100%;" class="x-form-field x-form-empty-field x-form-text" autocomplete="off" aria-invalid="false">

當頁面加載時，它看起來像 [![enter image description here][1]][1] 作為默認值。

現在，如果我嘗試使用以下方法增加價值

document.getElementById('userId-inputEl').value="test"

它在那里寫入值，看起來像 [![在此處輸入圖像描述][2]][2]。 如果我提交表單，添加此值后，它說該值是強制性的，這意味着它尚未接受該值。

在手動輸入時，當我單擊此框並輸入值時，它會被啟用，看起來像這樣 [![在此處輸入圖像描述][3]][3]，並且在提交表單后，該值被接受。

現在我嘗試使用

document.getElementById('userId-inputEl').click()

在傳遞值之前，但它不起作用。 在谷歌研究后，我發現這個元素附加了一些事件監聽器。 它們如下

[![在此處輸入圖像描述][4]][4]

我曾嘗試將 dispatchEvent 與組合結合使用來模糊、更改、聚焦、輸入、keydown、mousedown、selectstart 和 textinput，但沒有用。

我是事件監聽器概念的新手。 如何使用 javascipt 實現在框中輸入值，就像手動完成一樣？

在檢查窗口中從 eventlistener 選項卡打開模糊事件時，它如下所示：

[![在此處輸入圖像描述][5]][5]

我不知道如何實現這一目標。 請幫忙。 [1]： https://i.stack.imgur.com/PVVuQ.png [2]： https://i.stack.imgur.com/z5ezn.png [3]： HTTPS：//i.stack。 imgur.com/TgD0X.png [4]: https://i.stack.imgur.com/lP5zV.png [5]: https://i.stack.imgur.com/LEzM1.png

Answer 1

您可以使用 jquery 嘗試此操作。 如果您下載 jquery，則必須下載 jquery 或 cnd：

<head>
    <title> My website</title>
<script src="jquery-3.5.1.min.js"></script>
</head>

或者如果你 cnd jquery 那么

<head>
        <title> My website</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>

下一步： HTML

 <body >
<form id="AgentForm" name="AgentForm" > 
    <input id="userId-inputEl" type="text" size="1" name="userId" placeholder="Enter Agent UserID..." style="width:100%;" class="x-form-field x-form-empty-field x-form-text" autocomplete="off" aria-invalid="false">

    <button type="submit" name="submit"> Submit</button>
</form>
</body>

js

 $( document ).ready(function() {
    $('#userId-inputEl').val("test") 
    $('#AgentForm').on('submit', function(e){
          e.preventDefault();
       console.log($('#userId-inputEl').val());
      });
});

使用 javascript 為 web 元素調用 HTML DOM 中的 EventListener

問題描述

1 個解決方案

解決方案1
0 2021-10-27 11:58:52

使用 javascript 為 web 元素調用 HTML DOM 中的 EventListener

問題描述

1 個解決方案

解決方案1 0 2021-10-27 11:58:52

解決方案1
0 2021-10-27 11:58:52