概要
フェイスブックなどのように、文字入力時にテキストボックスを文字量に合わせて自動的に伸縮させる方法を調べてみました。主に下記の二点がポイントです。
◎自動伸縮するテキストボックスでそのまま送信
◎コメントを投稿するとページがリロードになり、ユーザー操作がキャンセルされますが、その状態を維持する。
私はフロントエンドが専門なので、開発段階ではサーバーで出力するデータをJSで仮に表示しデザインを進めたりします。
今回はその過程で生まれた事案です。
フェイスブックなどのように、文字入力時にテキストボックスを文字量に合わせて自動的に伸縮させる方法を調べてみました。主に下記の二点がポイントです。
◎自動伸縮するテキストボックスでそのまま送信
◎コメントを投稿するとページがリロードになり、ユーザー操作がキャンセルされますが、その状態を維持する。
私はフロントエンドが専門なので、開発段階ではサーバーで出力するデータをJSで仮に表示しデザインを進めたりします。
今回はその過程で生まれた事案です。
・投稿機能
・更新状態を維持
・編集機能で編集状態に移行
・入力無し投稿などへエラーメッセージ
・自分のコメントには「編集・削除」機能
◎自動伸縮するテキストボックス は、HTML5の「contenteditable」という属性を使用しています。form要素を使わなくともテキストを入力可能にする機能です。
もうひとつの◎ユーザー個別のページ状態を保存する は、同じくHTML5のWeb Storage という技術を使ってます。ブラウザにデータを保存する方法です。クッキーのような技術ですね。
ただ今回作成したツールは、個人のブラウザだけにデータを保存するのでコミュニケーションツールとしては実用的ではないです。あくまで開発のためのツールですね。
もちろんそのデータをサーバーに保存すればWEBアプリとして機能しますがそういうのはすでにあるので。
結構いい感じで使えるので実用的なツールにするために、軽さはこのままにデータをサーバーへ保存する仕様へ変更しようかと思案中です。
ログインしているユーザーだけができる機能などを調べるためにユーザーがログインしている状況をバーチャルで再現しています。
投稿した記事の編集もその場でできます。
いいねアイコン的なものも付けられます。
以前掲載していた記事のイメージです。汗
このページで紹介しているプログラムやビジュアルなどご依頼いただければ実装を賜ります。
お問い合わせはこちら