フォーム入力要素が機能しない

私は小さな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>

出典

2017-06-08 Krash

私は不透明度を変更する際にも表示プロパティを変更することで、私の問題を解決しました。

出典

2017-06-13 18:39:26 Krash

「不透明度」の代わりに「表示」を使用することはどうですか？たとえば：

<%@ 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>

出典

2017-06-08 05:08:21

原因は 'formPart2'は透過ですが、' formPart1'にあり、ユーザー入力をブロックします。 –

フォーム入力要素が機能しない

答えて

関連する問題