Question

我正在制作一个带有表单的小JSP页面。但是，“全名”文本输入字段不允许我输入文本？有谁知道问题的原因是什么？我的JSP页面的代码如下所示。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Billing Workflow Tracker</title>
<style>
    #formTitle {position: absolute; 
    left: 10px;
    top: 10px;}
    #formPart1 {position: absolute; 
    left: 10px;
    top: 80px;
    opacity: 1;
    transition: opacity 1s;}
    #formPart2 {position: absolute; 
    left: 10px;
    top: 80px;
    opacity: 0;
    transition: opacity 1s;}
    #buttonPart1 {position: absolute; 
    left: 10px;
    top: 180px;}
    #buttonPart2 {position: absolute; 
    left: 70px;
    top: 180px;}
</style>
</head>
<body>
    <script>
        function showFormPart1()
        {
            document.getElementById("formPart1").style.opacity = 1;
            document.getElementById("formPart2").style.opacity = 0;
        }

        function showFormPart2()
        {
            document.getElementById("formPart1").style.opacity = 0;
            document.getElementById("formPart2").style.opacity = 1;
        }
    </script>
    <h1 id="formTitle">Billing Workflow Tracker</h1>
    <form id="formPart1">
        <label>Full Name <input type="text" name="name" id="name" /></label>
        <label>E-mail <input type="email" name="email" id="email" /></label>
    </form>
    <form id="formPart2"> 
        <p>Reason for Billing Test</p>
        <input type="radio" name="reasons" id="reason1" value="1" />
        <label for="reason1">New Customer</label>
        <input type="radio" name="reasons" id="reason2" value="2" />
        <label for="reason2">Migration</label>
        <input type="radio" name="reasons" id="reason3" value="3" />
        <label for="reason3">Other</label>
    </form>
    <button id="buttonPart1" onclick="showFormPart1()">Part 1</button>
    <button id="buttonPart2" onclick="showFormPart2()">Part 2</button>
</body>
</html>

Answer 1

如何使用“display”而不是“opacity”？例如：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Billing Workflow Tracker</title>
<style>
    #formTitle {position: absolute; 
    left: 10px;
    top: 10px;}
    #formPart1 {position: absolute; 
    left: 10px;
    top: 80px;
    display: block;}
    #formPart2 {position: absolute; 
    left: 10px;
    top: 80px;
    display: none;}
    #buttonPart1 {position: absolute; 
    left: 10px;
    top: 180px;}
    #buttonPart2 {position: absolute; 
    left: 70px;
    top: 180px;}
</style>
</head>
<body>
    <script>
        function showFormPart1()
        {
            document.getElementById("formPart1").style.display = "block";
            document.getElementById("formPart2").style.display = "none";
        }

        function showFormPart2()
        {
            document.getElementById("formPart1").style.display = "none";
            document.getElementById("formPart2").style.display = "block";
        }
    </script>
    <h1 id="formTitle">Billing Workflow Tracker</h1>
    <form id="formPart1">
        <label>Full Name <input type="text" name="name" id="name" /></label>
        <label>E-mail <input type="email" name="email" id="email" /></label>
    </form>
    <form id="formPart2"> 
        <p>Reason for Billing Test</p>
        <input type="radio" name="reasons" id="reason1" value="1" />
        <label for="reason1">New Customer</label>
        <input type="radio" name="reasons" id="reason2" value="2" />
        <label for="reason2">Migration</label>
        <input type="radio" name="reasons" id="reason3" value="3" />
        <label for="reason3">Other</label>
    </form>
    <button id="buttonPart1" onclick="showFormPart1()">Part 1</button>
    <button id="buttonPart2" onclick="showFormPart2()">Part 2</button>
</body>
</html>

Answer 2

我通过在更改不透明度时更改显示属性来解决我的问题。

表单输入元素不起作用

2 个答案: