如何在不知道Java中ID的情況下獲取輸入文本字段的值

Question

我創建了一個javascript腳本，其中將特定的IP的所有點擊和操作記錄在頁面中時都進行了跟蹤。 除非用戶從輸入字段中搜索某些內容，否則一切正常。 我需要跟蹤用戶搜索過的文本。

但是我沒有關於該輸入字段的任何信息，即頁面也可以具有的id或class 。 多個輸入字段，也就是提交表單。

當按下Enter鍵或按下任何按鈕（搜​​索）時，我需要獲取該文本

就目前的html頁面而言，我有以下代碼。

<div class="navbar-form navbar-right">
  <!-- Search Page -->
  <div id="search-container" class="search-container" style="float: left;">
    <div class="search-wrapper">
      <div class="search-input-wrapper">
        <input type="text" class="search-layouts-input" ng-model="searchQuery" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="So, what are you looking for?" ng-keyup="$event.keyCode == 13 ? actionSearch() : null">
        <button type="submit" class="s-layout-btn" ng-click="actionSearch();">
          <svg id="Layer_1" width="20px" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#222">
            <defs>
              <style>.cls-1{fill:none;stroke:#222;stroke-miterlimit:10;stroke-width:2px;}</style>
          </svg>
        </button>
      </div>
    </div>
  </div>
  <!-- Search Page -->
</div>

Answer 1

您要實現這種東西嗎？ 當然，其中大多數都是偽代碼，但是非常簡單，只需獲取所有相關的輸入和按鈕，然后附加一些事件處理程序並更新應用程序狀態即可。

我已經包含了一些您可能希望在某些情況下啟動的基本功能，例如onStateUpdate ，可能不需要此功能，但是為簡單起見，保留它可能不會受到損害。

我主要使用面向ES6的語法，因為它使您可以用更少的代碼獲得相同的結果，我就是那么懶。

我之所以使用自調用函數的原因僅僅是為了使變量名沒有問題，並且無法在全局范圍內進行任何操作，等等。如果您想閱讀或更多地了解為何自調用函數可以相當出色，那么我建議你閱讀源，如本 。

 // Self invoked anonymous function. (function() { // The application state. const state = {}; // Lazy way to use querySelectorAll const $e = qs => document.querySelectorAll(qs); // Make a copy of the state and make it global. const getState = () => { window.state = { ...state}; console.clear(); console.log(window.state); }; // A function to run when the state updates. const onStateUpdate = () => { // Do some other stuff... getState(); }; // Handle the key up event. const inputHandler = (i, index) => i.onkeyup = () => { i.id == null || i.id == '' ? i.setAttribute("id", index) : null; const id = i.id; state[id] = i.value; onStateUpdate(); }; // Handle a button being clicked. const clickHandler = btn => btn.onclick = onStateUpdate; // Handle the enter key being pressed. const enterHandler = e => e.keyCode == 13 ? onStateUpdate() : null; // Assign all relevant events to the relevant functions. const dispatchEvents = () => { const inputs = $e("#search-container input[type=text]"); const buttons = $e("#search-container button"); inputs.forEach((i, index) => inputHandler(i, index)); buttons.forEach(b => clickHandler(b)); window.onkeypress = enterHandler; }; // Fire the dispatch function. dispatchEvents(); }()); 

 <!-- this one does nothing as it's outside of the search-container element --> <input type="text" id="testing" placeholder="I do nothing!" /> <div id="search-container"> <input type="text" id="test" /> <input type="text" id="demo" /> <input type="text" id="markup" /> <input type="text" /> <button>Search</button> </div> 

較舊的語法

 // Self invoked anonymous function. (function() { // The application state. var state = {}; // Lazy way to use querySelectorAll var $e = function(qs) { return document.querySelectorAll(qs); }; // Make a copy of the state and make it global. var getState = function() { window.state = JSON.parse(JSON.stringify(state)); console.clear(); console.log(window.state); }; // A function to run when the state updates. var onStateUpdate = function() { // Do some other stuff... getState(); }; // Handle the key up event. var inputHandler = function(i, index) { i.onkeyup = function() { if (i.id == null || i.id == '') { i.setAttribute("id", index); } var id = i.id; state[id] = i.value; onStateUpdate(); }; }; // Handle a button being clicked. var clickHandler = function(btn) { btn.onclick = onStateUpdate; }; // Handle the enter key being pressed. var enterHandler = function(e) { if (e.keyCode == 13) { onStateUpdate(); }; }; // Assign all relevant events to the relevant functions. var dispatchEvents = function() { var inputs = $e("input[type=text]"); var buttons = $e("button"); inputs.forEach(function(i, index) { inputHandler(i, index) }); buttons.forEach(function(b) { clickHandler(b) }); window.onkeypress = enterHandler; }; // Fire the dispatch function. dispatchEvents(); }()); 

 <input type="text" id="test" /> <input type="text" id="demo" /> <input type="text" id="markup" /> <input type="text" /> <button>Search</button>