如何在JavaScript中按下回车键时显示信息？

Question

我有一个 javascript 页面，我正在处理该页面，当鼠标悬停在 "Show Info" 按钮上并按下回车键时，我希望在该页面上显示信息。我尝试了几种不同的方法，但我无法弄清楚哪里出了问题。我很困惑，因为这是我一直在上的一堂课，我已经按照说明进行操作，但我不知何故无法弄清楚我做错了什么。任何帮助和指导将不胜感激。

这是我的代码：

var content = document.getElementById("berriesContent");
var button = document.getElementById("showMoreBerries");

button.onclick = function BC() {
  if (content.className == "open") {
    content.className = "";
    button.innerHTML = "Show Info";
  } else {
    content.className = "open";
    button.innerHTML = "Hide Info";
  }
};

function mouseinBerries() {
  document.getElementById("showMoreBerries").style.background = "#001a33";
}

function mouseoutBerries() {
  document.getElementById("showMoreBerries").style.background = " #1594e5";
}
document.keypress(function(e) {
  if (e.which == 13) {
    ("#berriescontent").addClass("show");
  }
})

body {
  background-image: url(Photos/Books.jpg);
  background-size: 75%;
  background-position: center;
  text-align: center;
  font-family: "Lucida Console", Monaco, monospace;
}

#Main {
  width: 100px;
  height: 70px;
  background: #f6e5b1;
  margin: 25px auto;
  border: #660000;
  border-style: ridge;
  border-width: 7px
}

img {
  height: 275px;
}

#berriesContent {
  width: 50%;
  padding: 5px;
  font-family: Sans-Serif;
  font-size: 18px;
  color: #444;
  margin: 0 auto;
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.01s;
}

#berriesContent.open {
  max-height: 1000px;
  background-color: burlywood;
  transition: max-height 0.01s;
}

#showMoreBerries {
  width: 20%;
  background: #1594e5;
  color: #fff;
  font-family: sans-serif;
  display: block;
  cursor: pointer;
  text-align: center;
  padding: 15px;
  margin: 10px auto;
}

<body bgcolor="#ff6633">
  <div id="Main">
    <h1> Menu</h1>
  </div>
  <center>
    <div id="berriesPic">
      <img src="photos/berries.jpg"><img></div>
    <a id="showMoreBerries" onmouseover="mouseinBerries()" onmouseout="mouseoutBerries()">Show Info</a>
  </center>
  <div id=b erriesContent>
    <p>This is the first photo I took after receiving a camera from my Grandfather.I was playing around with the settings and really loved the way that this photo in particular turned out. The red color against the more muted background stood out to me.</p>
  </div>
</body>

Answer 1

关于您的目标是什么，您的问题相当不清楚。如果我猜对了并且您想在按下 Enter 时切换信息框，就像您在单击时所做的那样，那么此解决方案将适用于您。

代码错误：

没有document.keypress这样的函数。您应该改为设置 document.onkeypress：document.onkeypress = function(e) {...}
您的 if 语句中的代码 ("#berriescontent").addClass("show") 无效。
无论鼠标是否悬停在按钮上，您编写代码的方式都会显示信息。您需要在按钮的 mouseover 事件中使用一个标志，并在文档的 keypress 事件中检查它。
在 HTML 中使用 id=b erriesContent 而不是 id="berriesContent"。

看看下面的代码片段，看看它是如何工作的。

片段：

/* ----- JavaScript ----- */
var
  buttonHovered = false,
  content = document.getElementById("berriesContent"),
  button = document.getElementById("showMoreBerries");

/* Event handlers. */
function showInfo () {
  var classList = content.classList;
  
  if (classList.contains("open")) {
    classList.remove("open");
    button.innerHTML = "Show Info";
  } else {
    classList.add("open");
    button.innerHTML = "Hide Info";
  }
}

function mouseinBerries () {
  button.style.background = "#001a33";
  buttonHovered = true;
}

function mouseoutBerries () {
  button.style.background = "#1594e5";
  buttonHovered = false;
}

/* Set the 'click' and 'keypress' events. */
button.onclick = showInfo;
document.onkeypress = function (e) {
  if (e.which == 13 && buttonHovered) showInfo(e);
}

/* ----- CSS ----- */
body {
  text-align: center;
  font-family: "Lucida Console", Monaco, monospace;
}

#Main {
  width: 100px;
  height: 70px;
  background: #f6e5b1;
  margin: 25px auto;
  border: #660000;
  border-style: ridge;
  border-width: 7px
}

#berriesContent {
  width: 50%;
  padding: 5px;
  font-family: Sans-Serif;
  font-size: 18px;
  color: #444;
  margin: 0 auto;
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.01s;
}

#berriesContent.open {
  max-height: 1000px;
  background-color: burlywood;
  transition: max-height 0.01s;
}

#showMoreBerries {
  width: 20%;
  background: #1594e5;
  color: #fff;
  font-family: sans-serif;
  display: block;
  cursor: pointer;
  text-align: center;
  padding: 15px;
  margin: 10px auto;
}

<!----- HTML ----->
<body bgcolor="#ff6633">
  <div id="Main">
    <h1> Menu</h1>
  </div>
  <center>
    <a id="showMoreBerries" onmouseover="mouseinBerries()" onmouseout="mouseoutBerries()">Show Info</a>
  </center>
  <div id="berriesContent">
    <p>This is the first photo I took after receiving a camera from my Grandfather.I was playing around with the settings and really loved the way that this photo in particular turned out. The red color against the more muted background stood out to me.</p>
  </div>
</body>

更新:

^（回应）

为了能够对许多按钮-contentBox 对使用相同的功能，您将必须更改整个代码：

您将需要使用 class 而不是所有按钮共享的 id 和所有内容框共享的另一个。
您需要遍历每个按钮以附加 click、mouseover 和 mouseout 事件的事件处理程序。
您将不得不更改标志的功能，而不仅仅是 true 或 false，以实际缓存悬停按钮。

查看以下代码片段以查看代码。

片段：

/* ----- JavaScript ----- */
var
  buttonHovered = null,
  buttons = document.querySelectorAll(".show-more");

/* Event handler. */
function showInfo (e, id) {
  /* Cache the data-id of the button, the content box and its classlist. */
  var
    id = this.dataset.id,
    content = document.querySelector(".hidden-content[data-id='" + id + "']"),
    classList = content.classList;
  
  /* Check whether the classlist contains 'open'. */
  if (classList.contains("open")) {
    classList.remove("open");
    this.innerHTML = "Show Info";
  } else {
    classList.add("open");
    this.innerHTML = "Hide Info";
  }
}

/* Set the 'click', 'mouseover' and 'mouseout' events for the buttons. */
[].forEach.call(buttons, function (button) {
  button.onclick = showInfo;
  button.onmouseover = function () {
    /* Set the background and the flag. */
    button.style.background = "#001a33";
    buttonHovered = button;
  };
  button.onmouseout = function () {
    /* Set the background and the flag. */
    button.style.background = "#1594e5";
    buttonHovered = null;
  };
});

/* Set the 'keypress' event for the document. */
document.onkeypress = function (e) {
  /* Check whether the clicked button is 'Enter' and if a button is hovered. */
  if (e.which == 13 && buttonHovered) {
    /* Call the function passing the button as the context and the event. */
    showInfo.call(buttonHovered, e);
  }
}

/* ----- CSS ----- */
body {
  text-align: center;
  font-family: "Lucida Console", Monaco, monospace;
}

#Main {
  width: 100px;
  height: 70px;
  background: #f6e5b1;
  margin: 25px auto;
  border: #660000;
  border-style: ridge;
  border-width: 7px
}

.hidden-content {
  width: 50%;
  padding: 5px;
  font-family: Sans-Serif;
  font-size: 18px;
  color: #444;
  margin: 0 auto;
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.01s;
}

.hidden-content.open {
  max-height: 1000px;
  background-color: burlywood;
  transition: max-height 0.01s;
}

.show-more {
  width: 20%;
  background: #1594e5;
  color: #fff;
  font-family: sans-serif;
  display: block;
  cursor: pointer;
  text-align: center;
  padding: 15px;
  margin: 10px auto;
}

<!----- HTML ----->
<body bgcolor="#ff6633">
  <div id="Main">
    <h1> Menu</h1>
  </div>
  <center>
    <a class="show-more" data-id="0">Show Info</a>
    <a class="show-more" data-id="1">Show Info</a>
    <a class="show-more" data-id="2">Show Info</a>
  </center>
  <div class="hidden-content" data-id="0">
    <p>This is the first photo I took after receiving a camera from my Grandfather.I was playing around with the settings and really loved the way that this photo in particular turned out. The red color against the more muted background stood out to me.</p>
  </div>
  <div class="hidden-content" data-id="1">
    <p>This is the second photo I took after receiving a camera from my Grandfather.I was playing around with the settings and really loved the way that this photo in particular turned out. The red color against the more muted background stood out to me.</p>
  </div>
  <div class="hidden-content" data-id="2">
    <p>This is the third photo I took after receiving a camera from my Grandfather.I was playing around with the settings and really loved the way that this photo in particular turned out. The red color against the more muted background stood out to me.</p>
  </div>
</body>

如何在JavaScript中按下回车键时显示信息？

How to Show Information When Enter Key is Pressed in JavaScript?

javascript

function

keypress

onkeypress

show-hide