作ったアプリ
https://quizzical-chandrasekhar-d0adff.netlify.app/
画面中央のテキストフィールドに文章を入力してSubmitしたら、画面に入力した文章が表示されます。
新しい文章を入力したら、その前の文章は消えて新しい文章に置き換わります。
ライブラリやフレームワークは使わずに作成しましたが、リセットCSSとbox-shadowの部分だけサンプルコードを流用しました。
こちらのProject No.4を元ネタにさせてもらいました。
特記事項
文章がはみ出る問題
作成中に試しにaaaaaaaaa...と入力してみたら、次のように文章がはみ出てしまいました。
これはCSSのword-breakというプロパティにbreak-allという値を設定すると解決できるようです。
p.output {
text-align: center;
word-break: break-all;
}
ちゃんと改行される。ただし、これをやると英単語の途中でも問答無用で改行されるので、特別な事情がなければ設定しないほうがいいかもしれません。上記のアプリでも最終的に設定するのやめました。
フォームを送信したら文章が一瞬だけ表示されてすぐ消える
語りつくされている問題だと思いますが、e.preventDefault()をちゃんと入れておきます。
フォームを送信したとき、（今回の場合）ページ全体がリロードされるのがデフォルトの動作になりますが、そうすると、入力した文章が表示されてすぐにページがリロードされるので、文章が一瞬だけ表示されてすぐ消えることになります。そこで、イベントハンドラ内でイベントオブジェクトを受け取って、e.preventDefault()でページ全体がリロードされるのを防ぎます。
const displayMessage = e => {
e.preventDefault()
const input = document.getElementById('message')
paraMessage.textContent = input.value
input.value = ''
input.focus()
paraMessage.style.display = 'block'
}
submit.addEventListener('click', displayMessage)
参考にさせていただいたところ
css – ブロックレベルから文字がはみ出してしまう
JavaScript 要素を表示/非表示にするサンプル(displayとvisibility)
Beautiful CSS box-shadow examples
フォームボックスのbos-shadowはこちらのコードを参考にさせてもらいました（ていうか、コピペしました）。
そして、もちろんMDN
↧