JavaScript blurメソッドでテキストボックスにフォーカスを外すサンプル

環境
Google Chrome 106.0.5249.119
Windows 10 Home 64bit

構文
const 変数名 = document.getElementById(“name");
変数名.blur()
blurメソッドを使ってテキストボックスにフォーカスを外します。

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<body>
<input type="text" id="name" maxlength="10" value="test" />
<p><input type="button" value="表示" onclick="funA()" /></p>
<script>
function funA() {
 //要素「name」の値を取得
const cft = document.getElementById("name");
//フォーカスを外す
cft.blur();
}
</script>
</body>
</html>
<!DOCTYPE html> <html> <body> <input type="text" id="name" maxlength="10" value="test" /> <p><input type="button" value="表示" onclick="funA()" /></p> <script> function funA() {  //要素「name」の値を取得 const cft = document.getElementById("name"); //フォーカスを外す cft.blur(); } </script> </body> </html>
<!DOCTYPE html>
<html>
<body>
<input type="text"  id="name" maxlength="10" value="test" />

<p><input type="button" value="表示" onclick="funA()" /></p>

<script>
 function funA() {
 //要素「name」の値を取得
  const cft = document.getElementById("name");
  //フォーカスを外す
  cft.blur();
  }
</script>

</body>
</html>

結果
「表示」ボタンを押すと、テキストボックスにフォーカスを外します。

JavaScript

Posted by arkgame