如何在不知道Java中ID的情况下获取输入文本字段的值

Question

我创建了一个JavaScript脚本，在该脚本中，当附加到页面中时，将跟踪特定IP的所有点击和操作。一切正常，除非用户从输入字段中搜索内容。我需要跟踪用户搜索过的文本。

  

但是我没有关于该输入字段的任何信息，即页面也可以具有的 id或class 。   多个输入字段，即也可以提交表单。

当我按下输入键或按下任何按钮（搜​​索）时，我需要获取该文本

就我目前的html页面而言，我有以下代码。

Using existing buildorder file: /data/data/com.termux/files/home/.termux-build/_buildall-aarch64/buildorder.txt
Building libandroid-support... ERROR: See /data/data/com.termux/files/home/.termux-build/_buildall-aarch64/libandroid-support.err

Answer 1

这是您要实现的事情吗？当然，其中大多数都是伪代码，但是非常简单，只需获取所有相关的输入和按钮，然后附加一些事件处理程序并更新应用程序状态即可。

我已经包含了一些您可能希望在某些情况下启动的基本功能，例如onStateUpdate，此功能可能没有需求，但可能不会为了简单起见，保留它会很痛苦。

我主要使用面向ES6的语法，因为它使您可以用更少的代码获得相同的结果，我只是那是懒惰的。

我之所以使用自调用函数的原因，是为了使变量名没有问题，并且在全局范围内无法进行任何操作，等等。如果您想阅读或更多地了解为什么自调用函数可以很漂亮好，那么我建议您阅读this之类的资料。

// 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>