onclickをEnterキーでも行いたい

質問

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

http://www.ibm.com/developerworks/jp/xml/library/x-ajaxxml8/

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

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

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

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

回答No.4

think49

#1 です。お礼をよみました。

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

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

# Re: whitebeltさん

回答No.3

poppo002544

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

回答No.2

神崎 渉瑠（@taloo）

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

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

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

お礼

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

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

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

回答No.1

think49

click ではなく、submit イベントを定義してください。
アクセシビリティを考えれば、click 依存は避けるのが無難です。
# Re: whitebeltさん

お礼

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

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

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

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