さて、前回の最後で２つの問題が生じていました。
1.エンターキーで送信されないこと
2.送信したあとも文字が消えないこと
このふたつの問題に対処していきたいと思います。
但し、エンターキーの問題の方について記述したことは完全に無駄足ですので、暇で仕方ない人意外は読まないほうがいいかもしれません。
html-css-javascript.hatenadiary.com
いちいちリンク先を見に行くのも面倒ですし、HTMLも書いておきます。
<body> <h1>掲示板</h1> <form action=""> <label for="name">名前</label> <input type="text" id="name" placeholder="名前を入力してください"> <label for="comment">コメント</label> <textarea id="comment"></textarea> <button id="submit">送信</button> </form> <div id="posted"></div> <script src="script.js"></script> </body>
エンターキーで送信できるようにするために
調べてみたのですが、どうやら<button>のところが問題だったようです。
前回<form>が問題だとか言ってましたけど、関係ありませんでした。
まるっきり関係ないわけではありませんが。
<button>によって<form>の中身を操作するわけですから。
で、何が問題だったかというと、<button>の属性を明示しておかなかったことでした。
どういうタイプのボタンなのかをちゃんと書いておかないといけないんです。
この場合は"submit"、つまり「送信」ですね。
こうすることで、エンターでも送信扱いになります。
<button id="submit" type="submit">送信</button>
こう書いておけば大丈夫なはず！
とはいえ、デフォルトでは属性はsubmitのハズなんですけどね。
まあこれで試してみましょう。
（実行中）。
だめでした。
なんで？
かなり時間をかけてコードを見てみたのですが・・・アレ・・・？
id="submit"
ってどこで使ってる？？
なんでこんなものが付いてるんだ？？
おぼろげな記憶によれば「何かここから受け取りたくなったときのために、とりあえずIDを付けておきましょう」みたいなアホなことを言ってた気がします。
今は使うことはないので、今回はここを消しておきます。
<button type="submit">送信</button>
果たして、半分だけうまく動作しました。
半分だけというのも、我ながらなかなか意味不明な言い方だとは思うのですが、うまくいくときといかないときがあります。
で、更に調べてみたのですが、原因恥ずかしいくらい簡単なことでした。
"textarea"でエンターを押したら、改行になるからでした。
逆にいうと、エンターで送信ができてしまったら、改行ができなくなります。
なのでこの状態はいじらないほうが良さそうです。
カーソルが名前のフォームにあるときにのみ、エンターキーで送信できます。
ここはこのままにしておこうと思います。
つまり
id="submit"
を消したことは全く関係ありませんでした。
IDをJavaScriptのほうで使っていないというだけで、とくに邪魔をするものでもありませんので。
当たり前といえば当たり前なんですけど、この辺が私が私たる所以（ゆえん）ですね。
エンターで送信しなくていいというのであれば、
type="submit"
も要らないということになりますが、ここはボタンの動作の内容をはっきりさせておくためにも書いておいたほうがよさそうです。
送信したあと、文字が消えるようにするために
送信したあと文字が消えないと、次に書き込むときに全部消すところから始めないといけません。
名前は変える必要はないのでこのままにしておきます。
コメント欄だけ消えるようにしたいと思います。
とはいえ、これはそんなに難しいことではありませんね。
最後に「空欄にしろ」と命令をすればいいだけですから。
なのでJavaScriptのコードに以下を追加しておきます。
document.getElementById("comment").value = "";//コメント内容をクリア
コメント欄のIDを取得して、その値を空白に書き換えました。
これでやっとうまくいきました。
これでとりあえず掲示板の雛形はできたと思います。
次はサーバーも使った掲示板の作成をしていこうと思います。
やっとブログタイトルのNode.jsを使っていくことになります。
