プログラムのメモ置き場 @ ウィキ

js002

最終更新:

chaka-poko

- view
管理者のみ編集可

EnterKeyの制御 その1

JWebForm1_1.aspx

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head runat="server">
  3. <title>JavaScript Enterキー入力でFocus移動 その1</title>
  4. <script type="text/javascript">
  5.  
  6. function ChangeKeycode() {
  7. if (event.keyCode == 13 && event.srcElement.type == 'text') {
  8. event.keyCode = 9;
  9. }
  10. }
  11.  
  12. document.onkeydown = ChangeKeycode;
  13.  
  14. </script>
  15. </head>
  16. <body onload="document.form1.txtUserID.focus()">
  17. <form id="form1" runat="server">
  18. <h2>
  19. JavaScript</h2>
  20. <h3>
  21. Enterキーの制御 その1</h3>
  22. <table cellpadding="5">
  23. <tr>
  24. <td width="110px">
  25. ユーザーID:</td>
  26. <td width="160px">
  27. <asp:TextBox ID="txtUserID" runat="server"></asp:TextBox>
  28. </td>
  29. <td width="50px">
  30. &nbsp;</td>
  31. </tr>
  32. <tr>
  33. <td>
  34. パスワード:</td>
  35. <td>
  36. <asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox>
  37. </td>
  38. <td>
  39. <asp:Button ID="btnSubmit" runat="server" Text="送信" />
  40. </td>
  41. </tr>
  42. <tr>
  43. <td colspan="3">
  44. &nbsp;<asp:Label ID="lblMsg" runat="server"></asp:Label>
  45. </td>
  46. </tr>
  47. </table>
  48. </form>
  49. </body>
  50. </html>

JWebForm1_1.aspx.vb

  1. Partial Class JavaScript_JWebForm1
  2. Inherits System.Web.UI.Page
  3.  
  4. Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click
  5.  
  6. Me.lblMsg.Text = "Submitされました。"
  7.  
  8. End Sub
  9. End Class
  10.  
イベントが発生したコントロールのタイプがtextだったら、Enterキー入力をTabキー入力に変換することでFocusを移動している。
コントロールのタイプがpasswordだったら、Enterキー入力のままなので、FormがSubmitされる。
つまり、ユーザーID入力、Enter→パスワードにFocusが移動 パスワード入力、Enter →FormがSubmitされる
document.body.onkeydown = ~ は、bodyタグの中に書かないとダメ。
document.onkeydown = ~ ならば、headタグのなかでも、bodyタグの中でもOK。
※このページはdocument.onkeydown =~をheadタグの中に書いている。
※このページはデザインファイル(.aspx)に直接JavaScriptを書いている。

[Counter] Total: -
目安箱バナー