Javascript 检测输入字段上的回车键_Javascript_Html_Css_Iframe_Input

Javascript 检测输入字段上的回车键

javascript html css iframe input

Javascript 检测输入字段上的回车键,javascript,html,css,iframe,input,Javascript,Html,Css,Iframe,Input,我正在使用带有omnibox（id=“address”）和“GO”按钮（id=“submit”）的IFrame浏览器，我想检测用户何时按下enter键并执行JavaScript函数。我尝试过使用标记和，但是表单破坏了我的应用程序，并且单击enter按钮没有任何作用这是我的密码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

我正在使用带有omnibox（id=“address”）和“GO”按钮（id=“submit”）的IFrame浏览器，我想检测用户何时按下enter键并执行JavaScript函数。我尝试过使用

标记和，但是表单破坏了我的应用程序，并且单击enter按钮没有任何作用

这是我的密码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="https://docs.google.com/drawings/d/e/2PACX-1vSqg7iNwpB8zKiJqvtbSf0-YrM_hiRkPs_aHG0RLVvXX1YnHfRfpnqSbN6DwEqpdaOWN1wZttTA3MI3/pub?w=30&h=30" type="image/x-icon" name="favicon"/>
    <title>Lokean Web Browser</title>
    <style type="text/css" media="all">
    @import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700&display=swap');
       body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.first-row {position: absolute;top: 0; left: 0; right: 0; height: 25px; padding:13px; padding-right: 0px; font-family: 'Noto Sans'; sans-serif; background-color:#202124; color:white; position:fixed; z-index: 4;}
.second-row {position: absolute; top: 46px; left: 0; right: 0; bottom: 0;}
.second-row iframe {display: block; width: 100%; height: 100%; border: none;}
.form {
   float: right;
}
#logo {
   
}
body {
   background-color: #202124;
   color: white;
   font-family: Noto Sans;
}
}
.noSelect {
    
}
#address {
   border-radius: 11px;
   border-style: none;
   border-width: 1px;
   width: 300px;
   padding: 3px;
   color: black;
   background-color: white;
   font-size: 11px;
}
#address:focus {
    border-style: solid;
    border-color: white;
    outline: none;
}
#submit {
   border-radius: 11px;
   border-color: #FFC107;
   border-style: solid;
   border-width: 1px;
   padding: 3px;
   background-color: #FFC107;
   color: black;
   font-size: 11px;
   margin-left: 6px;
   margin-right: 13px;
}
input[type=submit] {
    width: 2em;  height: 2em;
}
#submit:hover {
   cursor: pointer;
   animation-name: fill-hover;
  animation-duration: 0.4s;  
  animation-fill-mode: forwards;
}
#submit:focus {
    outline: none;
}
#submit:active {
   animation-name: border-active;
  animation-duration: 0.25s;  
  animation-fill-mode: forwards;
}
@keyframes border-active {
  from {}
  to {border-color: #9A7E24; border-width: 3px; margin-left: 4px; margin-right: 11px;}
}
@keyframes fill-hover {
  from {}
  to {border-color: #E0A800; background-color: #E0A800;}
}
a {
   color: white;
}
#url {
    
}
.title {
   float: left;
   font-size: 19px;
   color: white;
}
.center {
   text-align: center;
}
</style>
<script type="text/javascript" charset="utf-8">
    var url;
    function view() {
       url = document.getElementById("address").value;
       var checkColon = url.includes(":");
       var youtube = url.includes("youtube.com/");
       var youtubeShort = url.includes("youtu.be/");
       var noSearch = url.includes(".") || url.includes(":");;
       var newUrl;
       var n;
       var s;
        if (noSearch !== true){
          url = "https://en.wikipedia.org/w/index.php?search=" + url + "&title=Special%3ASearch";
       }
       if (checkColon !== true && noSearch == true){
          url = "http://" + url;
       }
       if (youtube == true) {
          n = url.indexOf('&');
          if (n !== -1) {
             url = url.substring(0, n);
          }
          newUrl = url.replace("/watch?v=", "/embed/");
          url = newUrl;
       }
       if (youtubeShort == true) {
          newUrl = url.replace("youtu.be/", "youtube.com/embed/");
          url = newUrl;
       }
       document.getElementById("url").src = url;
       document.getElementById("address").value = url;
           return false;
    }
    function iLoad() {
       url = document.getElementById("url").src;
       document.getElementById("address").value = url;
    }
    
</script>
</head>
<body>
 <div class="first-row">
  <span class="title" id="title">
     <img src="https://docs.google.com/drawings/d/e/2PACX-1vQ6gkadBIbBAYR28QDvj8FQRnJ51SL9qIFYJQMPtkMiiyRb9ezklHjM5qTY3jCblh6wCw6hTkDJWLQl/pub?w=72&amp;h=72" id="logo">
  </span>
  <span class="form">
<input onClick="this.setSelectionRange(0, this.value.length)" type="url" name="address bar" id="address" class="noSelect" value="" placeholder="Enter URL or search"/>
  <input type="submit" value="+" id="submit" onclick="view();">
  </span>
</div>
<div class="second-row">
<iframe id="url" title="Lokean Web" src="https://wikipedia.org" onLoad="iLoad();" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowpaymentrequest="true" allowfullscreen sandbox = "allow-forms allow-pointer-lock allow-same-origin allow-scripts allow-top-navigation" ></iframe>
<div class="center">
<br>
Lokean Web Browser unblocks Youtube and all GoGuardian-blocked websites, and uses Wikipedia for search purposes.
<br>
However, some websites refuse to connect because this is an iFrame browser.
</div>
</div>
</body>
</html>


洛基网络浏览器
@导入url（'https://fonts.googleapis.com/css?family=Noto+Sans:400i、700&display=swap'）；
正文，html{宽度：100%；高度：100%；边距：0；填充：0}
.第一行{位置：绝对；顶部：0；左侧：0；右侧：0；高度：25px；填充：13px；右侧填充：0px；字体系列：'Noto Sans'；无衬线；背景色：#202124；颜色：白色；位置：固定；z索引：4；}
.第二行{位置：绝对；顶部：46px；左侧：0；右侧：0；底部：0；}
.iframe的第二行{显示：块；宽度：100%；高度：100%；边框：无；}
.表格{
浮动：对；
}
#标志{
}
身体{
背景色：#202124；
颜色：白色；
字体系列：Noto Sans；
}
}
noSelect先生{
}
#地址{
边界半径：11px；
边框样式：无；
边框宽度：1px；
宽度：300px；
填充：3倍；
颜色：黑色；
背景色：白色；
字体大小：11px；
}
#地址：focus{
边框样式：实心；
边框颜色：白色；
大纲：无；
}
#提交{
边界半径：11px；
边框颜色：#FFC107；
边框样式：实心；
边框宽度：1px；
填充：3倍；
背景色：#FFC107；
颜色：黑色；
字体大小：11px；
左边距：6px；
右边距：13px；
}
输入[类型=提交]{
宽度：2米；高度：2米；
}
#提交：悬停{
光标：指针；
动画名称：填充悬停；
动画持续时间：0.4s；
动画填充模式：正向；
}
#提交：焦点{
大纲：无；
}
#提交：活动{
动画名称：活动边框；
动画持续时间：0.25s；
动画填充模式：正向；
}
@关键帧边框处于活动状态{
从{}
至{边框颜色：#9A7E24；边框宽度：3px；左边距：4px；右边距：11px；}
}
@关键帧填充悬停{
从{}
至{边框颜色：#E0A800；背景颜色：#E0A800；}
}
a{
颜色：白色；
}
#网址{
}
.头衔{
浮动：左；
字号：19px；
颜色：白色；
}
.中心{
文本对齐：居中；
}
var-url；
函数视图（）{
url=document.getElementById（“地址”）.value；
var checkColon=url.includes（“：”）；
var youtube=url.includes（“youtube.com/”）；
var youtubeShort=url.includes（“youtu.be/”）；
var noSearch=url.includes（“.”| | url.includes（“：”）；；
var-newUrl；
var n；
var s；
如果（鼻弓！==真）{
url=”https://en.wikipedia.org/w/index.php?search=“+url+”&title=Special%3ASearch”；
}
if（检查冒号！==true&&noSearch==true）{
url=“http://”+url；
}
如果（youtube==true）{
n=url.indexOf（'&'）；
如果（n！=-1）{
url=url.substring（0，n）；
}
newUrl=url.replace（“/watch？v=”，“/embed/”；
url=newUrl；
}
if（youtubeShort==true）{
newUrl=url.replace（“youtu.be/”，“youtube.com/embed/”；
url=newUrl；
}
document.getElementById（“url”）.src=url；
document.getElementById（“地址”）.value=url；
返回false；
}
函数iLoad（）{
url=document.getElementById（“url”）.src；
document.getElementById（“地址”）.value=url；
}


Lokean网络浏览器解锁Youtube和所有GoGuardian屏蔽的网站，并使用Wikipedia进行搜索。


但是，一些网站拒绝连接，因为这是一个iFrame浏览器。

感谢您的时间和帮助！：）

您可以执行以下操作：

const inputEl=document.getElementById（“输入”）；
inputEl.addEventListener（“键控”，manageEnter）；
函数manageEnter（evt）{
evt.preventDefault（）；
如果（evt.keyCode===13）{
console.log（“你好”）；
}
}

您可以执行以下操作：

const inputEl=document.getElementById（“输入”）；
inputEl.addEventListener（“键控”，manageEnter）；
函数manageEnter（evt）{
evt.preventDefault（）；
如果（evt.keyCode===13）{
console.log（“你好”）；
}
}

这可能行得通，但我无法在输入框中键入。这是因为preventDefault吗？@ConferenceMuseAreName我做了一个修改，问题是addEventListener中的事件类型，而不是keydown，您需要使用keyup。这可能有效，但我无法在输入框中键入。这是因为preventDefault吗？@ConferenceMuseAreName我做了一个修改，问题是addEventListener中的事件类型，而不是keydown，您需要使用keyup。