各要素を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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/17 14:08
退会済みユーザー
2019/03/17 14:52
2019/03/18 13:23