|<!-- -->flabaka.com

querySelectorとpreventDefaultを使ってみる

querySelectorとpreventDefaultを使ってみる

querySelector

input エリアの値は getElementById、e.target.value 以外にも、querySelector を使っても値を取得出来るみたいなので、試してみました。

const keyDown = e => {
  if (e.key === "Enter") {
    //console.log("Enterキーが押されました!")
    // const word = document.getElementById("textval").value
    //const word = e.target.value
    const word = document.querySelector("#textval").value
    console.log(word)
  }
}

input エリアに id 属性が設定されているのであれば、#id 名を。クラス属性ならば、.クラス名を設定してあげます。

onSubmit

前回は e.key===Enter を使って Enter キーが押されたかを判断していました。

form タグを使っても可能な様なので、こちらも試してみる事に。

<form onSubmit={keyDown}>
  <input type="text" placeholder="検索ワードを入力" id="textval" />
</form>

form に onSubmit を設定

const keyDown = e => {
  const word = document.querySelector("#textval").value
  //検索処理
}

これで試してみると…

input に検索語句を入力して Enter を押すと、ブラウザがリロードされるだけで、検索処理が行われませんでした。

preventDefault

const keyDown = e => {
  const word = document.querySelector("#textval").value
  e.preventDefault()
  //検索処理
}

preventDefault を設定する事で、ブラウザのリロードが行われなくなり、検索結果が無事表示されました。

form を使ってのやり方も分かりましたが、今回は e.key===Enter を使っての方法で行こうかと思っています。

©2022 flabaka.com