Установите фокус на Iframe и вставьте вкладку Ctrl + с помощью AppScript - PullRequest
Новая
       52

Установите фокус на Iframe и вставьте вкладку Ctrl + с помощью AppScript

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

У меня есть панель навигации с 4-мя продуктовыми иконками и счетчиком.

Когда вы нажимаете на каждый значок, встроенный фрейм появится внизу.

У меня две проблемы:

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

Во-вторых, я хочу иметь функцию ctrl + tab , чтобы я мог легко переходить к следующему меню вкладок, не нажимая на него.

Есть ли способ решить эти две проблемы?

Вот мой код (я удалил исходный URL для iframe из-за конфиденциальности моего клиента) 

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();
})
    
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;
}
<!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" />
</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=samplehomepage"><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>
</body>
</html>

И, кстати, я использую AppScript для кодирования.

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

Похожие темы

...