エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
入力フォームにリアルタイムハイライト機能を自前実装した話
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
入力フォームにリアルタイムハイライト機能を自前実装した話
こんにちは! 株式会社ココナラ フロントエンド開発グループのよしみんです。 本記事では、Vue.jsを使用... こんにちは! 株式会社ココナラ フロントエンド開発グループのよしみんです。 本記事では、Vue.jsを使用して入力フォームのテキストエリアにリアルタイムでハイライト機能を自前実装した話をしたいと思います。 なぜ自前実装? テキストエリアにハイライトなんてcssでつければいいんじゃないの? テキストエリアにcssで装飾することはもちろんできますが、入力した文字に対するハイライトのような装飾の仕方はできません。 ライブラリを使えば簡単に実装できるのでは? Vue.jsでテキストエリアにハイライトをつける機能のライブラリを調べると、下記のようなライブラリがヒットします。 ただ、ライブラリではtextareaのタグが含まれているものでした。 今回実装したいのはBuefyの入力フォームコンポーネントを使用している箇所であり、このコンポーネントでは既にtextareaのタグがラップされている為、適用す