onclickをEnterキーでも行いたい

チャットの仕組みを知りたくて以下のサイトを見ています。

http://www.ibm.com/developerworks/jp/xml/library …


ここの『リスト 6. chat.php (修正後)』にあります、発言を送信する部分、

<button onclick="addmessage()">Add</button>

をEnterキーで行いたいと思い、 onKeyPressへ書き換えてみましたが反応しませんでした。

こちらをonclickでもEnterキーでも両方で行いたいのですが、どのようにすればよろしいのでしょうか？

No.4 回答者： think49 回答日時： 2014/08/13 10:36

#1 です。

お礼をよみました。

> 画面が一度消え再表示される、いわゆるページリロードのようになってしまいます。
form送信が発行され、画面が再描画されている為と思われます。
onclick でも同様の問題は発生するはずですが、form要素がなかったのでしょうか。

デフォルトアクション(form送信)を無効化する為、event.preventDefault() を追加してください。
https://developer.mozilla.org/ja/docs/Web/API/ev …

# Re: whitebeltさん

No.3 回答者： poppo002544 回答日時： 2014/08/12 17:31

jqueryとなりますが

$("input select").keydown(function() {
if( event.keyCode == 13 ) {
alert('テキストとプルダウン上でenterキーが押下されました。');
}
});

No.2 回答者： taloo 回答日時： 2014/08/11 12:53

<button type="button" onclick="addmessage()">Add</button>

このままで行けませんか？

type="button"を指定しておいた方がいいです。typeのデフォルト値はブラウザ共通ではないので。
もしかしたら、エンターキーでフォームが送信され、ページを再読み込みしているのかもしれません。（type="submit" がデフォルトのブラウザを使われている場合。）

この回答へのお礼

ありがとうございます。
こちらの方法も試してはいたのですが、できませんでした。
発言を入れEnterを押すと、画面が一瞬消え再表示、発言は更新されません。

<button type="button" onclick="addmessage()"　onKeyPress="addmessage()">Add</button>

も試してみましたがダメでした。

お礼日時：2014/08/11 13:41

No.1 回答者： think49 回答日時： 2014/08/11 08:17

click ではなく、submit イベントを定義してください。

アクセシビリティを考えれば、click 依存は避けるのが無難です。
# Re: whitebeltさん

この回答へのお礼

お早いご回答ありがとうございます。
おっしゃるように、

<form id="chatmessage">
<input type="text" name="message" id="messagetext">
<input type="submit" value="Add" onclick="addmessage();">
</form>

としてみますと、Enterキーで発言の送信はできたのですが
画面が一度消え再表示される、いわゆるページリロードのようになってしまいます。

このスクリプトの当初の挙動のようにリロード無しで発言のみを表示させたいのですが、不可能なのでしょうか？

お礼日時：2014/08/11 11:09