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

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

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

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 91.0.4472.77

autofocus属性を取得

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

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

また、以下のコードを、

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

サンプルコード

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

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

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