javascript autofocus属性を取得して有効・無効にする

作成日 2021.06.07
更新日 2022.08.26
javascript
javascript

javascriptで、自動的にフォーカスがあたるautofocus属性を取得して有効・無効にするサンプルコードを掲載してます。ブラウザはchromeを使用しています。

1. 環境
2. autofocus属性を取得
3. サンプルコード

環境

OS windows11 pro 64bit
Apache 2.4.43
ブラウザ chrome 104.0.5112.101

Javascript サンプル集はこちら

autofocus属性を取得

autofocus属性を取得する場合は、autofocusプロパティを確認することで可能です。
「ture」で有効に、「false」で無効に設定できます。

<input id="bar" type="email" name="email"/>
<input id="hoge" type="email" name="email" autofocus/>
<input id="btn" type="button" value="ボタン" />

<script>

'use strict';

document.getElementById('btn').onclick = function(){

  const elm = document.getElementById('hoge')
  // コンソールに出力
  console.log(elm.autofocus);
  // 無効に設定
  elm.autofocus = false;

}

</script>

use strictについてはこちら

実行結果を確認すると、「autofocus」属性が有効なので「true」が表示され、「false」にすると無効になることが確認できます。

また、以下のコードを、

document.getElementById('btn').onclick = function(){

  const elm = document.getElementById('hoge')
  // コンソールに出力
  console.log(elm.autofocus);
  // 無効に設定
  elm.autofocus = false;

}

アロー関数とdocument.getElementByIdを省略して、簡潔に記述することもできます。

btn.onclick = () =>{

  // コンソールに出力
  console.log(hoge.autofocus);
  // 無効に設定
  hoge.autofocus = false;

}

アロー関数の使い方

サンプルコード

以下は、
「実行」ボタンをクリックして、autofocus属性の値を切り替えて、状態を出力するサンプルコードとなります。

※cssには「tailwind」を使用して、アロー関数で関数は定義してます。三項演算子も使用してます。

三項演算子を使ってif文を1行で書く

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>

<script>

  const hoge = () => {

    foo.autofocus ? foo.autofocus = false : foo.autofocus = true;

    disp.innerHTML = foo.autofocus;

  }

  window.onload = () => {

    btn.onclick = () => { hoge() };

  }

</script>

<body>
  <div class="grid min-h-screen place-items-center">
    <div class="w-11/12 p-12 bg-white sm:w-8/12 md:w-1/2 lg:w-5/12">
      <h1 id="disp" class="text-xl font-semibold">状態</h1>      
        
        <input id="foo" type="email" name="email" class="block w-full p-3 mt-2 text-gray-700 bg-gray-200 appearance-none focus:outline-none focus:bg-gray-300 focus:shadow-inner" autofocus/>        
        
        <button id="btn" class="w-full py-3 mt-6 font-medium tracking-widest text-white uppercase bg-black shadow-lg focus:outline-none hover:bg-gray-900 hover:shadow-none">
          実行
        </button>        
      
    </div>
  </div>
</body>

</html>

実行結果を確認すると、autofocusの状態が切り替わって、状態が表示されていることが確認できます。