时间戳

首页 > 解决方案 > 检查我的输入框是否被点击或者是'焦点'纯js

javascript - 检查我的输入框是否被点击或者是'焦点'纯js

问题描述

我需要知道是否单击了我的输入框，以便我可以触发脚本来执行某些操作，但我尝试的所有路由似乎都没有执行任何操作。

基本输入框

<input type="text" id="search-stuff" placeholder="search"/>

Javascript

var inputBox = document.getElementById("search-stuff");
if (inputBox) {
    inputBox.addEventListener('keyup',function () {
        startSearch();
    })
    inputBox.addEventListener('onfocus',function() {
        console.log('we clicked');
        searchBoxClicked();
    })
}

function searchBoxClicked() { console.log('we clicked it'); }

我需要知道用户是否单击，以便在用户键入内容之前清除先前元素上的一些类。

标签： javascript

解决方案

你几乎做对了。几个小错误：

  1. 听focus事件。onfocus不是一个事件。
  2. 该keyup事件用于在释放键盘按钮时（在keydown事件之后）进行侦听。如果你想听鼠标点击，使用click事件。

var inputBox = document.getElementById("search-stuff");
if (inputBox) {
  inputBox.addEventListener('click', function() {
    startSearch();
  });
  inputBox.addEventListener('focus', function() {
    searchBoxClicked();
  });
}

function searchBoxClicked() {
  console.log('focus');
}

function startSearch() {
  console.log('click');
}
<input type="text" id="search-stuff" placeholder="search" />

推荐阅读