この記事はJavaScript Advent Calendar 2019の6日目の記事です！
1日遅れてしまってすみません…
最近、クライアントワークで実装した機能を紹介します。
機能としては大きいものではないですが、何回か同じような機能を実装しているので、意外と使うことはあるかもしれないやつをまとめました。
- ライブラリやFWは使わずにPure JavaScriptで書いてます
- ES2015の書き方なので、そのままではIE11で動かない部分などがあります
ラジオボタンの選択で活性・非活性が切り替わるセレクトボックス
選択した項目によって、さらに入力したり選択できるようにしたいというケースが結構あります。
See the Pen ラジオボタンで活性・非活性が切り替わるセレクトボックス by daichi (@kandai) on CodePen.
これはセレクトボックスを非活性にしていますが、テキストエリアだったり、そもそも表示/非表示を切り替えるパターンなんかもよくあります。
トースト(通知パネル)の表示
トースト(通知パネル)を表示させるJS。
表示の仕組み自体はCSSで位置を切り替えてるだけです。
See the Pen Toast by daichi (@kandai) on CodePen.
引数で表示する文字やトーストの色を変更できるようにしてます。
時間差で処理するために setTimeout を2回使っているのが個人的に気になっているので、もっと良い方法がないかなと思ってたりします。
2019/12/10 追記
コメントでCSSアニメーションを使う方法を提案していただいたので、そちらの方法に変更しました。
animationend イベント便利ですね。
https://developer.mozilla.org/ja/docs/Web/API/Document/animationend_event
指定した文字数で文字列を省略してもっと見るをつける
最近はCSSで文字を省略することも多いですが、場合によってはJSで処理するっていうこともまだあります。
指定した文字数で省略して、超えた場合は3点リーダーの表示と もっと見る で省略した部分を表示したいということがあったので作りました。
See the Pen 指定した文字数でもっと見るを表示させる by daichi (@kandai) on CodePen.
テキストボックスの値をモーダルで選択する
セレクトボックスで値を選択するのではなくて、モーダルで選択させたい！
ということだったので、テキストボックスをクリックしたらモーダル表示、モーダルの中のラジオボタンを選択したら元のテキストボックスに反映させます。
See the Pen テキストボックスの値をモーダルで選択する by daichi (@kandai) on CodePen.
<input type="text"> に readonly 属性を入れておくのがポイントです。
要素を複製する
同じような処理を何回か書いていたので、汎用的に使えるようにしてみました。
See the Pen 要素を複製するJS by daichi (@kandai) on CodePen.
以前はJSの中でHTMLを組み立てていたのですが、変更に弱かったり、特定の要素の複製にしか使えなかったので汎用的に使えるようになってとても役に立ってます。
あと、HTMLのdata属性に複製できる最大数や最小値を持たせています。
data属性をうまく使うことで、JS側の処理をまとめたりできるので最近はよく使っています。
以上です！
大きな機能というよりは細かいものでしたが、よく使う機能の実装をストックしておいたり、汎用的に作っておくことで助かることは多いと思うので、誰かの参考になれば嬉しいです。