如何在按Tab时操纵光标跳到的位置？

如何解决如何在按Tab时操纵光标跳到的位置？

var host;
var absender;
var pw;
var empf;
var sub;
var mess;





function sende() {

  host = document.getElementById("Host").value;
  absender = document.getElementById("ID").value;
  pw = document.getElementById("PW").value;
  empf = document.getElementById("AT").value;
  sub = document.getElementById("Subject").value;
  mess = document.getElementById("Message").value;


  Email.send({
    Host: host,Username: absender,Password: pw,To: empf,From: absender,Subject: sub,Body: mess
  });



  document.getElementById("AT").value = "";
  document.getElementById("Subject").value = "";
  document.getElementById("Message").value = "";

  alert("Email has been sent to " + empf);


}




function save() {

  localStorage.setItem("Host",host);
  localStorage.setItem("Absender",absender);
  localStorage.setItem("Passwort",pw);


}


function getData() {

  document.getElementById("Host").value = localStorage.getItem("Host");
  document.getElementById("ID").value = localStorage.getItem("Absender");
  document.getElementById("PW").value = localStorage.getItem("Passwort");

}


function deleter() {

  localStorage.removeItem("Host",host);
  localStorage.removeItem("Absender",absender);
  localStorage.removeItem("Passwort",pw);

}








function gib() {
  console.log(document.getElementById("PW").value);
}

#UmAlles {
  width: 490px;
  height: 185px;
  border: 5px solid black;
  margin: 20px auto;
}

#containMess {
  width: 300px;
  height: 160px;
  position: relative;
  left: 190;
  top: 2;
}

#mess {
  margin: 3px;
  background-color: black;
  color: white;
}

#MailContainer {
  height: 168px;
  width: 190px;
  background-color: black;
  position: relative;
  bottom: 163;
}

table {
  align-content: center;
  width: 100%;
  height: 100%;
}

td {
  max-width: 50%;
  min-width: 30%;
  align-content: center;
}

tr {
  align-content: center;
}

.Boxxes {
  width: 98%;
  height: 90%;
  background-color: black;
  display: block;
  margin: 3px;
  position: relative;
  right: 0;
  color: white;
}

#Message {
  background-color: black;
  color: white;
}

html,body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: #000;
}

.glow-on-hover {
  width: 220px;
  height: 50px;
  border: none;
  outline: none;
  color: #fff;
  background: #111;
  cursor: pointer;
  position: relative;
  bottom: 220px;
  left: 230px;
  z-index: 0;
  border-radius: 10px;
}

.glow-on-hover:before {
  content: '';
  background: linear-gradient(45deg,#ff0000,#ff7300,#fffb00,#48ff00,#00ffd5,#002bff,#7a00ff,#ff00c8,#ff0000);
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  border-radius: 10px;
}

.glow-on-hover:active {
  color: #000
}

.glow-on-hover:active:after {
  background: transparent;
}

.glow-on-hover:hover:before {
  opacity: 1;
}

.glow-on-hover:after {
  z-index: -1;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  left: 0;
  top: 0;
  border-radius: 10px;
}

@keyframes glowing {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

<html lang="en">

<head>
  <title> Mailer </title>
  <Meta charset="UTF-8">
  <Meta name="viewport" content="width=device-width,initial-scale=1">
  <!-- <script src="https://smtpjs.com/v3/smtp.js"></script> -->
  <script src="js/FileSaver.js"></script>
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

</head>

<body onload="getData()">


  <div id="UmAlles">
    <form>
      <div id="containMess"><textarea id="Message" placeholder="Email-Inhalt" cols="35" rows="4" tabindex="5"></textarea></div>
      <div id="MailContainer">
        <table style="width:100%">
          <tr>
            <td><input type="text" id="Host" placeholder="Host-Server" class="Boxxes" tabindex="0"></td>
          </tr>
          <tr>

            <td><input type="text" id="ID" placeholder="Versender-Email" class="Boxxes" tabindex="1"></td>
          </tr>
          <tr>

            <td><input type="password" id="PW" placeholder="Passwort" class="Boxxes" tabindex="2"></td>
          </tr>
          <tr>

            <td><input type="text" id="AT" placeholder="Empfänger" class="Boxxes" tabindex="3"></td>
          </tr>
          <tr>

            <td><input type="text" id="Subject" placeholder="Betreff" class="Boxxes" tabindex="4"></td>
          </tr>
        </table>
      </div>

      <button class="glow-on-hover" type="button" onClick="sende()" tabindex="6">Send Email</button>

      <button type="button" onClick="save()" tabindex="7">Save Data</button>
      <button type="button" onClick="getData()" tabindex="8">Get Data</button>
      <button type="button" onClick="deleter()" tabindex="9">delete Data</button>

    </form>
  </div>


</body>

</html>

说明：单击一个字段，连续按Tab键并观察其行为。

问题：如何简单地设置制表符，就像简单地设置制表符的工作顺序一样？（我知道通常只是按照HTML文件中元素的顺序跳转）

如何排除<html>之外的任何内容？

我很期待提出任何建议，因为我只是对它背后的机制感到好奇。

解决方法

在评论中聊天后，真正的问题是如何使用Tab键将输入元素集中，并且在最后一个元素之后，循环回到第一个输入元素，而不关注本机浏览器UI（即，后退/前进箭头，URL）输入等）

似乎唯一的选择是JS，您可以在最后一个输入元素上监听keydown事件，然后将第一个输入元素聚焦。

function focusFirst (e) {
  const keyCode = e.which || e.keyCode

  if (keyCode == 9) {
    // suppose that the first tabindex is 1
    document.querySelector('[tabindex="1"]').focus()
  }
  
  e.preventDefault()
  return false
}

<section>
  <input placeholder="1" tabindex="1" />
  <input placeholder="2" tabindex="2" />
  <input placeholder="3" tabindex="3" />
  <!-- The onkeydown listener must be on the last focusable input element -->
  <input placeholder="4" tabindex="4" onkeydown="focusFirst(event)" />
</section>

如何在按Tab时操纵光标跳到的位置？

如何解决如何在按Tab时操纵光标跳到的位置？

解决方法

相关推荐