jQueryのカレンダーにて日付選択時の動きについて

jQueryのカレンダーにて日付を選択した際、自動的に次のinputタグへ
フォーカスが当たるようにしたいです。

lang
1$(function() {
2 $(".Calendar").datepicker({
3  onSelect: function(){
4   $(this).next().focus();
5   }
6  });
7});

lang
1<input type="text" class="Calendar" />
2<input type="text" class="TXT" />

現状、$(this).next().focus();の記述のせいかと
思いますが、うまく動作しません。

maisumakun

2017/08/02 11:12

jQueryで使えるdatepickerライブラリもいくつかあります。どれを使いましたか？

退会済みユーザー

2017/08/02 11:27

jQuery ui Datepickerです。https://jqueryui.com/datepicker/

行動規範の内容に同意します

回答1件

ベストアンサー

以下のコードを使用して確認しましたが、そのような挙動は確認できませんでした。一度以下のコードを実行してみていただけませんか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <link rel="stylesheet"
7          href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
8</head>
9<body>
10<input type="text" class="Calendar">
11<input type="text" class="TXT">
12<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
13<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
14<script>
15    $(function () {
16        $(".Calendar").datepicker({
17            onSelect: function () {
18                $(this).next().focus();
19            }
20        });
21    });
22</script>
23</body>
24</html>

追記

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <link rel="stylesheet"
7          href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
8</head>
9<body>
10<p>
11    <input type="text" class="Calendar">
12</p>
13<p>
14    <input type="text" class="TXT">
15</p>
16<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
17<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
18<script>
19    $(function () {
20        $(".Calendar").datepicker({
21            onSelect: function () {
22                $(this).parent().next().children().focus();
23            }
24        });
25    });
26</script>
27</body>
28</html>

投稿2017/08/02 11:40

編集2017/08/02 12:48

s8_chu

総合スコア14731

退会済みユーザー

2017/08/02 12:20

あれ？動きますね。ありがとうございます。自分のコード見直してきます。

退会済みユーザー

2017/08/02 12:37

HTML側がpタグで囲われているのが原因でした。 <p class="input">注文日 <input type="text" class="Calendar" /> </p> <p class="input">番号　<input type="text" id="Num"/> </p> inputタイプだけにフォーカスできるよう調べてみます。