Установите фокус на iframe, когда нажата кнопка табуляции, и нажмите клавиши Ctrl + Tab для кнопок - PullRequest
Новая
       67

Установите фокус на iframe, когда нажата кнопка табуляции, и нажмите клавиши Ctrl + Tab для кнопок

0 голосов
/ 18 февраля 2020

У меня есть этот веб-сайт, который я создал с помощью AppScript, который включает заголовок вкладки с некоторыми кнопками на нем.

Все хорошо и все коды работают. Но у меня есть небольшая проблема с нажатием на каждое меню вкладки, чтобы отобразить встроенный в него iframe.

Как только я щелкну по вкладке, отобразится Iframe, и мне все еще нужно щелкнуть внутри этого iframe, чтобы я мог выполнять свою работу. Это заставляет меня много времени заканчивать sh мою работу, потому что У меня есть четыре встроенных iframe в заголовке вкладки.

Есть ли способ, когда я использую сочетание клавиш CTRL + TAB или TAB, он автоматически переместится в меню следующей вкладки?

Далее, если эта клавиша работает и переместилась на кнопку следующей вкладки, она также установит фокус на нижеприведенный фрейм, и мне не нужно будет нажимать внутри нее, чтобы я мог выполнить задача.

Наконец, ярлык будет перемещаться только до пятого меню, которое является текстовым полем, и если я снова нажму CTRL + TAB, он будет назначен на первую вкладку меню. (это вообще возможно? Если нет, то все нормально)

Может кто-нибудь мне помочь? Все предложения очень ценятся.

Here's my header tab menu Вот мой код: 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
    <base target="_top">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--Import Google Icon Font-->
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery-ui.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css"/>
    <link rel="stylesheet" href="cssChangeColor.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,300i,400,400i,600|Montserrat:300,300i,400,400i,500,500i,600,600i,700|Ubuntu:300,300i,400,400i,500,500i&display=swap" rel="stylesheet"/>
    <link rel="stylesheet" href="style.css" />
<style>
body {font-family: Arial;}

h7{
  margin-left: .6%;
  margin-right: 2.5%;
}

input{
  padding-left:1px;
  float: left;
  padding: 14px;
  transition: 0.3s;
  display: inline-block;
  width: 10%;
}

/* Style the tab */
.tab {
  margin-left: .6%;
  margin-right: 2.5%;
  overflow: hidden;
  border: 1px solid #0D47A1;
  background-color: #64B5F6;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  margin-left: .2%;
  margin-bottom: .2%;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

.tab1 .button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #1E88E5;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #BBDEFB;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
.tab1{
  margin-left: 50%;
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}
.tablinks{
 height: 5%;
 width: 10%;
 margin-top:.2%;
}

a{
 height: 5%;
 width: 8%;
 margin-top:.6%;
 margin-right:.2%;
}

input{
background-color: #E3F2FD;
}
</style>
</head>
<body>
<h7>Moderating Tools</h7>
<button class="tablinks" onclick="openCity(event, 'Walmart5')"><i class="material-icons"></i>1st tool</button>
<button class="tablinks" onclick="openCity(event, 'Walmart5')"><i class="material-icons"></i>2nd tool</button>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'Walmart1')"><i class="material-icons">add_shopping_cart</i></button>
  <button class="tablinks" onclick="openCity(event, 'Walmart2')"><i class="material-icons">add_shopping_cart</i></button>
  <button class="tablinks" onclick="openCity(event, 'Walmart3')"><i class="material-icons">add_shopping_cart</i></button>
  <button class="tablinks" onclick="openCity(event, 'Walmart4')"><i class="material-icons">add_shopping_cart</i></button>
  <input  class="tablinks" id="box1" type="textbox"  placeholder="0" autocomplete="off">
  <input  class="tablinks" id="box2" type="textbox" disabled>
  <button class="tablinks" onclick="openCity(event, 'Walmart5')"><i class="material-icons">hourglass_full</i></button>
  <button class="tablinks" id="reset"><b style="color:white;">RESET</b><i class="material-icons"></i></button>
  <button class="tablinks"><a href="<?= ScriptApp.getService().getUrl()?>?v=hghsye"><i class="material-icons"></i></a><b style="color:white;">HOME</b></button>
  <a class="waves-effect btn waves-effect waves-red btn red lighten- modal-trigger" href="#demo-modal"><b style="color:white;">Record Prod</b></a>
</div>

<div id="Walmart1" class="tabcontent" tabindex=1>
<iframe id="frame-id" class="embed-responsive-item" src="URL HERE" width="98%" height="900px" ></iframe>
</div>

<div id="Walmart2" class="tabcontent" tabindex=2>
<iframe id="frame-id" class="embed-responsive-item" src="URL HERE" width="98%" height="900px" ></iframe>
</div>

<div id="Walmart3" class="tabcontent" tabindex=3>
<iframe id="frame-id" class="embed-responsive-item" src="URL HERE" width="98%" height="900px" ></iframe>
</div>

<div id="Walmart4" class="tabcontent" tabindex=3>
<iframe id="frame-id" class="embed-responsive-item" src="URL HERE" width="98%" height="900px" ></iframe>
</div>

<div id="Walmart5" class="tabcontent" tabindex=3>
<button id="clear" class="tablinks" style="color:black;">clear logs</button>
<div id="history"><b></b></div>
</div>

<div id="demo-modal" class="modal">
 <div class="modal-content">
    <div class="modal-content">
    <h4 style="color:black"></h4>
    <input id="num" type="text" id="todo_3" />
    <span></span>Name
    </div>
    <div class="modal-content">
    <h4 style="color:black"></h4>
    <input id="num1" type="text" id="todo_3" />
    <span></span>1st Hour
    </div>
    <div class="modal-content">
    <h4 style="color:black"></h4>
    <input id="num2" type="text" id="todo_3" />
    <span></span>2nd Hour
    </div>
    <div class="modal-content">
    <h4 style="color:black"></h4>
    <input id="num3" type="text" id="todo_3" />
    <span></span>3rd Hour
    </div>
    <div class="modal-content">
    <h4 style="color:black"></h4>
    <input id="num4" type="text" id="todo_3" />
    <span></span>4th Hour
    </div>
    <div class="modal-content">
    <h4 style="color:black"></h4>
    <input id="num5" type="text" id="todo_3" />
    <span></span>5th Hour
    </div>
    <div class="modal-content">
    <h4 style="color:black"></h4>
    <input id="num6" type="text" id="todo_3" />
    <span></span>6th Hour
    </div>
    <div class="modal-content">
    <h4 style="color:black"></h4>
    <input id="num7" type="text" id="todo_3" />
    <span></span>7th Hour
    </div>
    <div class="modal-content">
    <h4 style="color:black"></h4>
    <input id="num8" type="text" id="todo_3" />
    <span></span>8th Hour
    </div>
    <button id="btn3" class="btn waves-effect waves-light-small blue darken-3" class="flow-text"><i class="material-icons left">arrow_forward</i>Submit Prod</button> <br>
</div>
</div>

<script charset="utf-8">

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

let box1 = document.getElementById("box1");
let box2 = document.getElementById("box2");
let resetBtn = document.getElementById("reset");
let clearBtn = document.getElementById("clear");
let historyContainer = document.getElementById("history");
let history = [];
//listen key enter press on the input
box1.addEventListener("keyup", e => {
  if (e.key === "Enter" && e.target.value !== "") {
  const summedValue = (box2.value && box2.value.trim() === "")  ? Number(box2.value) : Number(box2.value) + Number(e.target.value)
  box2.value = summedValue;
  historyContainer.innerHTML += <p>${"[" + box2.value + "]"+ "  " + "-" + new Date()}</p>;
  box1.value = "";
  }
});
//reset the second box and
resetBtn.addEventListener("click", () => {
  box2.value = "";
});

clearBtn.addEventListener("click", () => {
  historyContainer.innerHTML = "";
});


    $(document).ready(function(){
    $('.modal').modal();
  })


</script>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...