时间戳

首页 > 解决方案 > java - 在Java jsp中输入键事件时如何隐藏警报div

java - java - 在Java jsp中输入键事件时如何隐藏警报div

问题描述

您好，我在 jsp (html) 中有一个简单的表单，我需要在其中填写 4 个字段（id、姓名、电子邮件和电话号码）。每当ID 输入为空并且用户单击“添加”按钮（位于表单底部）时，ID 输入字段下方的隐藏 div会显示下一条消息：“请填写该字段”。

形式

但是，一旦用户在输入字段上键入数字，我希望再次隐藏此 div 消息。所以我不知道如何获取这个 keyevent 并将其发送到 servlet，并且能够使用 ${variable} 再次隐藏潜水警报消息。我不使用JavaScript，我使用Java，所以我想问你，我怎样才能做到这一点

我的 JSP：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
 <head>
 <style><%@include file="/css/addEmployeeStyle2.css"%></style>
 <meta http-equiv="Content-Type"
    content="text/html; charset=UTF-8">
 <title> Add Employee Form</title>
 </head>
 <body>
<h1 class = "h1-title">ADD EMPLOYEE</h1>
 <hr class = "hr-line"> 
 <div class = "wrapper">
 <form class = "form" action="AddEmployeeServlet" method="post">
 <input type="text" name="emp_id" placeholder = "ID"class = "input" 
 onkeypress='return event.charCode > 47 && event.charCode < 58'>
 <div id= "error" class="alert-danger" ${loginError eq 1 ? '' : 'hidden'} role="alert">
 <h4>Complete this field please</h4>
 </div>
<input type="text" name="emp_name" placeholder = "Name" class = "input" onkeypress="return (event.charCode > 64 && 
    event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)">
 <input type="text" name="emp_email" placeholder = "Email" class = "input">
 <input type="text" name="emp_phone" placeholder ="Phone" class = "input"
  onkeypress = "return event.charCode > 47 && event.charCode < 58">
 <input class = "btn" type="submit" value="ADD">
 </form>
 </div>
 </body>
 <a class = "home-link" href="index.jsp"> Employee App </a>
</html>

和我的 servlet (AddEmployeeServlet) 代码：

package edu.uptc.controller;

import java.io.IOException;
import java.util.concurrent.CopyOnWriteArrayList;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import edu.uptc.model.Employee;

/**
 * Servlet implementation class EmployeeServlet
 */
@WebServlet("/AddEmployeeServlet")
public class AddEmployeeServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    private CopyOnWriteArrayList<Employee> employeesList;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public AddEmployeeServlet() {
        super();
        employeesList = new CopyOnWriteArrayList<Employee>();
        burnSomeData();
    }

    public void burnSomeData() {
        employeesList.add(new Employee(1, "Juana", "juana@mail", 11111));
        employeesList.add(new Employee(2, "Pedro", "pedro@mail", 22222));
        employeesList.add(new Employee(3, "Carlos", "carlos@mail", 33333));
        employeesList.add(new Employee(4, "Alex", "alex@mail", 44444));
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
     *      response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
     *      response)
     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.getSession().setAttribute("loginError", 1);
        if (request.getParameter("emp_id").equals("")) {
            request.getRequestDispatcher("/addEmployee.jsp").forward(request, response);
            request.getSession().setAttribute("loginError", 0);
        } else {
            int id = Integer.valueOf(request.getParameter("emp_id"));
            if (validEmployeeId(id)) {
                employeesList.add(new Employee(id, request.getParameter("emp_name"), request.getParameter("emp_email"), Long.valueOf(request.getParameter("emp_phone"))));

                request.getSession().setAttribute("employeesListSize", employeesList.size());
                request.getRequestDispatcher("/addEmployeePositiveResponse.jsp").forward(request, response);
            } else {
                request.getRequestDispatcher("/addEmployeeNegativeResponse.jsp").forward(request, response);
            }
            request.getSession().setAttribute("employeesList", employeesList);
        }
    }

    protected boolean validEmployeeId(int id) {
        boolean valid = true;
        for (Employee employee : employeesList) {
            if (employee.getEmp_id() == id) {
                valid = false;
                break;
            }
        }
        return valid;
    }
}

标签： javahtmljspinputhidden

解决方案

您无需调用 servlet 来隐藏该 div，您只需使用 javascript 即可。首先检查 div是否在按键error上没有类，如果是，然后将类添加到您的.hiddenhiddendiv

演示代码： 

var input = document.querySelector('input[name="emp_id"]');
//on keypress call this
input.addEventListener('keypress', function(event) {
  //get reference of div
  var element = document.querySelector('#error')
  //check it doesn't have hidden class
  if (!element.classList.contains("hidden")) {
    element.classList.add("hidden") //hide it
  }
});
.hidden {
  display: none
}
<input type="text" name="emp_id" placeholder="ID" class="input" onkeypress='return event.charCode > 47 && event.charCode < 58'>
<div id="error" class="alert-danger" ${loginError eq 1 ? '' : 'hidden'} role="alert">
  <h4>Complete this field please</h4>
</div>

推荐阅读