tabキーの移動について

各要素をtabキーで移動するにはtabindex属性を使用するみたいなのですが、実際に試してみたところ <button type="button" id="result" tabindex = "7">=</button> だけなぜか飛ばされて次にいってしまいます。何か原因はありますでしょうか。

HTML
1<?php
2
3require_once(__DIR__ . '/config.php');
4
5$text1 ='';
6$text2='';
7
8$result='';
9
10if ($_SERVER['REQUEST_METHOD'] === 'POST'){
11  $text1 = $_POST['text1'];
12  $text2 = $_POST['text2'];
13  $selected = $_POST['answer'];
14
15  switch ($selected){
16    case "plus";
17      $result = $text1 + $text2;
18      break;
19    case "mainasu";
20        $result = $text1 - $text2;
21        break;
22    case "kakeru";
23        $result = $text1 * $text2;
24        break;
25    case "waru";
26          $result = $text1 / $text2;
27          break;
28
29  }
30
31}
32
33 ?>
34
35<!DOCTYPE html>
36<html lang = "ja">
37<head>
38  <meta charset = "utf-8">
39  <title>calculator</title>
40  <link rel="stylesheet" href="styles.css">
41</head>
42<body>
43<div id ="container">
44  <h1>計算</h1>
45  <form action="" method="POST">
46    <div id="container-1">
47      <input type="text" id="text1" name="text1"  tabindex = "1" placeholder="数値1" value="<?= h($text1); ?>"  onKeyup="this.value=this.value.replace(/[^0-9]+/,'')">
48      <ul>
49        <li tabindex = "2" data-id="plus" class="btn">+</li>
50        <li tabindex = "3" data-id="mainasu" class="btn">−</li>
51        <li tabindex = "4" data-id="kakeru" class="btn">×</li>
52        <li tabindex = "5" data-id="waru" class="btn">÷</li>
53        <input type="hidden" id="answer" name="answer" value="">
54      </ul>
55      <input type="text"  id="text2" name="text2" tabindex = "6" placeholder="数値2" value="<?= h($text2); ?>" onKeyup="this.value=this.value.replace(/[^0-9]+/,'')">
56    <button type="button" id="result" tabindex = "7">=</button>
57    <div id="cal_result"><?= h($result); ?></div>
58    <div id="clear">Clear</div>
59  </div>
60</form>
61</div>
62<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
63<script>
64$(function(){
65  'use strict';
66  var $selected = '';
67  $('.btn').on('click', function(){
68    $('.btn').removeClass('selected');
69    $(this).addClass('selected');
70   $selected  = $('#answer').val($(this).data('id'));
71
72    });
73  $('#result').on('click', function(){
74    if ($('#text1').val() === '' || $('#text2').val() === ''  || $selected === ''){
75      alert('Choose One!');
76    } else {
77      $('form').submit(); //POST形式で送られる
78    }
79  });
80  $('#clear').on('click', function(){
81    location.reload();
82    });
83});
84</script>
85</body>
86</html>
87

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

回答2件

ベストアンサー

こっちでHTMLだけ切り出してテストしましたが別にとばされませんねー
操作ミスとか、キャッシュがきいてるとかはないでしょーか

投稿2019/03/17 13:47

退会済みユーザー

総合スコア0

GoGobuchiking

2019/03/17 14:08

htmlだけ切りとってsafariで試したら出来ませんでした。ただ、グーグルクロームで試したら出来ました。ブラウザによるんでしょうか。

退会済みユーザー

2019/03/17 14:52

safariだとデフォルトでタブ移動関連の設定がおかしーとかいてる記事がひっかかりましたが、どーでしょーか https://yuichon.com/2016/12/safari-focus/

GoGobuchiking

2019/03/18 13:23

紹介して頂いたリンクの通りに進めたらサファリでもうまく行きました。ありがとうございます。

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

確実に対応させたいならtabindexではなくJavaScriptでonblurで行かせたいさきにfocus入れるように作ってください。

投稿2019/03/17 21:52

m.ts10806

総合スコア80850

GoGobuchiking

2019/03/18 13:22

確実に対応させるに越したことはないですね。jqueryではblue()とfocus()を使うみたいですね。

m.ts10806

2019/03/20 06:52 編集

blue()ではなくblur()です。ちなみにjQueryはそもそもJavaScriptで組まれたライブラリです。 blurもfocusも普通に一般的なイベントとして装備されています。 https://developer.mozilla.org/ja/docs/Web/Events/blur https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/focus

GoGobuchiking

2019/03/21 06:46

誤字でしたすみません。マニュアルみたいのですが、自分が作ったコードのどこにblurとfocusを入れていいのか皆目見当がつきません。

m.ts10806

2019/03/21 06:53

イベント取得は分かりますか？今でもclick書かれてますが、要領は同じです

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

あなたの回答