用户输入后显示结果的问题

问题描述 投票：0回答：1

背景：

我正在创建一个网络应用程序，允许用户在字段中输入网址，单击复选按钮，然后将显示一个结果框，显示该网址是否属于受信任的站点。此后，还应该有一个“重试”按钮，供用户清除该字段并弹出另一个网址。我一整天都在尝试聊天，但似乎不起作用。

问题： 感谢以下方面的帮助：

  1. 结果显示：当前结果显示比较乱。预期的布局是顶部的标题，然后是结果，说明它是否是受信任的站点，最后是“重试”按钮。欢迎任何进一步的建议，以获得更人性化的布局！

  2. 键入空字段会显示结果：如果字段为空，则不应触发任何功能。然而，它不起作用。

我是这方面的新手。谢谢！

我的 HTML 代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GovCheck</title>
    <script src="https://kit.fontawesome.com/07db50a2cb.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <header>
      <div id="mastbanner" class="masthead">
        <img src="./red_lionhead transparent.png" alt="masthead image" id="mastheadImage">
        <div id="textContainer" class="masthead">
          <p id="mastText">A Singapore Government Agency Website</p>
        </div>
      </div>

      <div id="checkerHeader">
        <h1 id="myHeader">Trusted sites by GovSG</h1>
        <p class="headerPara">Key in a web link, and we'll tell you if it's safe or not.</p>
        <p class="headerPara">
          Start surfing with confidence!
          <i class="fa-solid fa-shield-heart" style="color: #d32709;"></i>
        </p>
      </div>
    </header>

    <div id="search-container">
      <form onsubmit="event.preventDefault(); checkURL();"></form>
      <input type="text" id="urlInput" placeholder="Enter a URL" autofocus autocomplete="off">
      <button class="check" onclick="checkURL()">Check</button>
    </div>
  
    <div class="result">
      <div class="resultContainer">
        <h2 id="headerResult">Result</h2><div id="resultContent">
        <p id="trustedResult"><i class="fa-solid fa-square-check" style="color: #6cf25a;"></i> This is a trusted site by Singapore Gov. Click ahead!</p>
      <p id="notTrustedResult"><i class="fa-solid fa-triangle-exclamation" style="color: #d7a042;"></i> This may not be a trusted site. Think twice before clicking ahead!</p>
      </div>
      <button id="retryButton" onclick="retryButtonClick()">Try again</button>
      </div>
      
    </div>
  
    <div id="status">
      <p>&copy; 2023 Government of Singapore. Last updated on <span id="lastUpdated"></span>.</p>
    </div>

    <script src="./functions.js"></script>
  </body>
</html>

我的CSS代码：

body {
  margin: 0;
  padding: 0;
}

#mastbanner {
  background-color: rgb(240, 240, 240);
  color: hsl(0, 0%, 28%);
  font-size: 0.6875rem;
  max-width: 2000px;
  height: 20px;
  position: relative;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif;
  display: flex;
  align-items: center;
}

#mastheadImage {
  width: auto;
  max-height: 70%;
  position: absolute;
  left: 0.3rem;
  margin-top: 0;
}

#textContainer {
  position: relative;
  left: 1.8rem;
}

#checkerHeader {
  padding-top: 5rem;
  text-align: center;
  color: rgb(26, 24, 21);
  font-family: "Open Sans", sans-serif;
}

#myHeader {
  margin-bottom: 35px;
}

.headerPara {
  line-height: 0%;
}

#search-container {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif;
  border-bottom: 1.5px solid #bbb4b4; /* Add a border to the bottom of the search container */
  padding-top: 25px;
  padding-bottom: 40px; /* Add padding to create space for the border */
  width: 70%; /* Adjust the width to change the length of the border */
  margin: auto; /* Center the container on the page */
  box-sizing: border-box; /* Include padding and border in the element's total width */;
}

input {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 5px;
  width: 255px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4285f4;
  color: #fff;
  border: 1px solid #4285f4;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
}

button:hover {
  background-color: #3c78d8;
}

.resultContainer{
  display: flex;
  flex-direction: column; /* Stack children vertically */
  align-items: center;
  position: relative;
  width: 10%;
  margin: 5% auto;
}

#retryButton {
  display: none;
  align-items: center;
  margin-top: 10px; /* Add space above the retry button */
}

.result {
  display: none;
  border-radius: 10px;
  background-color: rgb(240, 240, 240);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif;
  top: 62%; /* Center vertically */
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  box-sizing: border-box;
  position: absolute;
}

#headerResult {
  display: none;
  text-align: center;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif;
  margin-bottom: 10px; /* Add spacing between header and text */
}

#trustedResult, #notTrustedResult {
  text-align: center;
  font-size: 20px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif;
  margin: 10px 0;
  padding: 15px;
  border-radius: 5px;
  display: none;
}



#status {
  text-align: left;
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 0%;
  font-size: 0.6875rem;
  padding-right: 1%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

我的Javascript代码：

document.getElementById("urlInput").addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        if (document.getElementById("urlInput").value.trim() !== "") {
            checkURL();
        } else {
            displayErrorMessage("Please enter a URL.");
        }
    }
});

document.querySelector(".check").addEventListener("click", function() {
    if (document.getElementById("urlInput").value.trim() !== "") {
        checkURL();
    } else {
        displayErrorMessage("Please enter a URL.");
    }
});

function checkURL() {
    let userInput = document.getElementById("urlInput").value;
    let resultContainer = document.querySelector('.result');
    let headerResult = document.getElementById("headerResult");
    let isTrusted = document.getElementById("trustedResult");
    let notTrusted = document.getElementById("notTrustedResult");
    let retryButton = document.getElementById("retryButton");

    if (retryButton) {
        retryButton.style.display = "none";
    }

    resultContainer.style.display = "none";
    

    if (userInput.includes(".gov.sg") || userInput.includes(".for.sg") || userInput.includes(".for.edu.sg")) {
        // Display trusted result
        resultContainer.style.display = "flex";
        headerResult.style.display = "block";
        isTrusted.style.display = "block";
        notTrusted.style.display = "none";
        headerResult.innerHTML = "Result";
        if (retryButton) {
            retryButton.style.display = "block";
        }
        
    } else {
        // Display not trusted result
        resultContainer.style.display = "flex";
        headerResult.style.display = "block";
        isTrusted.style.display = "none";
        notTrusted.style.display = "block";
        headerResult.innerHTML = "Result";

        if (retryButton) {
            retryButton.style.display = "block";
        }
}
}
function clearResults() {
    let resultContainer = document.querySelector('.result');
    let headerResult = document.getElementById("headerResult");
    let isTrusted = document.getElementById("trustedResult");
    let notTrusted = document.getElementById("notTrustedResult");
    let retryButton = document.getElementById("retryButton");

    resultContainer.style.display = "none";
    headerResult.style.display = "none";
    isTrusted.style.display = "none";
    notTrusted.style.display = "none";

    if (retryButton) {
        retryButton.style.display = "none";
    }
}

function retryButtonClick() {
    clearResults();
    document.getElementById("urlInput").value = ""; // Clear the input field
}
    
    function getLastModifiedDate (){
        let lastModified = new Date(document.lastModified);
        let options = {year:'numeric', day:'numeric', month: 'short'};
        return lastModified.toLocaleDateString('en-SG',options);
    }
    document.getElementById('lastUpdated').innerHTML=getLastModifiedDate();
javascript html css search web-applications
1个回答
0
投票
  1. 结果显示：

可以改进您的布局，以提高结果的可读性和呈现效果。让我们修改 HTML 结构和 CSS 以获得更有条理的显示： 更新的 HTML 结构：

html

<!-- Your HTML content until the form -->
<div id="search-container">
  <form onsubmit="event.preventDefault(); checkURL();">
    <input type="text" id="urlInput" placeholder="Enter a URL" autofocus autocomplete="off">
    <button class="check" onclick="checkURL()">Check</button>
  </form>
</div>

<!-- Result Section -->
<div class="result" id="resultSection">
  <h2 id="headerResult">Result</h2>
  <div id="resultContent">
    <p id="trustedResult"><i class="fa-solid fa-square-check" style="color: #6cf25a;"></i> This is a trusted site by Singapore Gov. Click ahead!</p>
    <p id="notTrustedResult"><i class="fa-solid fa-triangle-exclamation" style="color: #d7a042;"></i> This may not be a trusted site. Think twice before clicking ahead!</p>
  </div>
  <button id="retryButton" onclick="retryButtonClick()">Try again</button>
</div>
<!-- Your remaining HTML content -->

更新了结果的 CSS：

css

/* Add or modify CSS as needed for better layout and visibility */
.result {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Styles for result paragraphs and button */
#headerResult {
  font-size: 24px;
  margin-bottom: 15px;
}

#resultContent p {
  margin: 10px 0;
}

#retryButton {
  padding: 10px 20px;
  margin-top: 20px;
  font-size: 16px;
  background-color: #4285f4;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#retryButton:hover {
  background-color: #3c78d8;
}
  1. 键入空白字段会显示结果：

为了防止在字段为空时显示结果，您需要修改 JavaScript 逻辑。 更新了 JavaScript：

javascript

function checkURL() {
  let userInput = document.getElementById("urlInput").value.trim();
  let resultSection = document.getElementById("resultSection");
  let headerResult = document.getElementById("headerResult");
  let isTrusted = document.getElementById("trustedResult");
  let notTrusted = document.getElementById("notTrustedResult");
  let retryButton = document.getElementById("retryButton");

  if (userInput === "") {
    clearResults();
    return; // Exit function if the input is empty
  }

  // Rest of your checkURL() function logic remains unchanged
  // ...
}

其他建议：

Error Handling: Consider displaying an error message if the URL format is invalid or if there's a connection error while checking the URL.
Accessibility: Ensure the web app is accessible, and elements like buttons and inputs are properly labeled for screen readers.

尝试实施这些更改以改进您的网络应用程序的功能和布局。根据您的要求进一步调整样式和功能。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.