如何在JavaScript中通过text类型输入框触发按钮函数

当在id为search_filter1的输入框中输入内容时，触发对应“查看更多”按钮的view_all()函数功能。

现有输入框代码 #

<input
  id="search_filter1"
  type="text"
  placeholder="搜索团队..."
  name="search"
  onkeyup="search_filter()"
>

需触发的按钮对应函数代码（已翻译为中文） #

function view_all() {
    var dots = document.getElementById("dots");
    var moreText = document.getElementById("more");
    var btnText = document.getElementById("myBtn");
  
    if (dots.style.display === "none") {
      dots.style.display = "inline";
      btnText.innerHTML = "查看全部";
      moreText.style.display = "none";
    } else {
      dots.style.display = "none";
      btnText.innerHTML = "收起";
      moreText.style.display = "list-item";
    }
}

实现方法 #

方法1：直接修改输入框的onkeyup事件 #

在原有事件中添加view_all()调用，输入时同时执行原搜索逻辑和目标函数：

<input
  id="search_filter1"
  type="text"
  placeholder="搜索团队..."
  name="search"
  onkeyup="search_filter(); view_all();"
>

方法2：用JavaScript绑定事件（推荐解耦写法） #

如果不想改动HTML代码，可在JS中给输入框绑定keyup事件：

document.getElementById('search_filter1').addEventListener('keyup', function() {
    search_filter(); // 保留原有搜索功能
    view_all(); // 触发查看更多按钮的功能
});

注：如果不需要保留原有的search_filter()功能，直接删除对应调用语句即可。

内容的提问来源于stack exchange，提问作者user20161712