在 Java jsp 中输入按键事件时如何隐藏警报 div
How can I hide an alert div when key-event on input in Java jsp
您好，我在 jsp (html) 中有一个简单的表格，我需要在其中填写 4 个字段（id、姓名、电子邮件和 phone 号码）。每当 ID 输入 为空且用户单击“添加”按钮（位于表单底部）时，ID 输入字段[=28 下方的隐藏 div =] 显示下一条消息：“请填写该字段”。
但是我希望在用户在输入字段中键入数字后立即再次隐藏此 div 消息。所以我不知道如何获取此键事件并将其发送到 servlet，以及如何使用 ${variable} 再次隐藏 dive 警报消息。我没有使用 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;
}
}
您不需要调用 servlet 来隐藏 div 您可以使用 javascript 简单地做到这一点。首先检查 div error 是否在按键上没有 hidden class 如果是，则将 hidden class 添加到您的 div.
演示代码 :
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>
您好，我在 jsp (html) 中有一个简单的表格，我需要在其中填写 4 个字段（id、姓名、电子邮件和 phone 号码）。每当 ID 输入 为空且用户单击“添加”按钮（位于表单底部）时，ID 输入字段[=28 下方的隐藏 div =] 显示下一条消息：“请填写该字段”。
但是我希望在用户在输入字段中键入数字后立即再次隐藏此 div 消息。所以我不知道如何获取此键事件并将其发送到 servlet，以及如何使用 ${variable} 再次隐藏 dive 警报消息。我没有使用 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;
}
}
您不需要调用 servlet 来隐藏 div 您可以使用 javascript 简单地做到这一点。首先检查 div error 是否在按键上没有 hidden class 如果是，则将 hidden class 添加到您的 div.
演示代码 :
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>