我在 android phoneGap 中开发了一个应用程序。我使用 html css 来设计目的,它工作正常。但是当我在文本框中输入时,我的设计正在崩溃。我附上了我的表单。请仔细检查并清除我的问题。
但是当我在这些文本框中输入文本时,我的表单是这样的
在这些我的另一个文本框被禁用。我该如何解决这个问题?
我的代码 更新 PhoneGap
<script type="text/javascript">
</script>
<style type="text/css">
#footer {
position:absolute; z-index:2;
top:92%;bottom:32px; left:0;
width:100%;
height:18px;
padding:0;
}
input:focus{//update
outline: none;
}
.ex21{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-color:#FBB917;
border: 1px solid;
background:url('searchbtn.PNG' ) repeat-y right;
padding-right:20px;
}
.ex2{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-color:#FBB917;
border: 1px solid;
}
.searchbox input {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
margin-top:0.2cm;
margin-left:1cm;
width:70%;
height: 32px;
float: left;
font-size:15pt;
padding: 2px;
border-top: 4px solid orange;
border-bottom: 4px solid orange;
border-left: 4px solid orange;
}
.sea input {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
margin-top:0.2cm;
background-image: url(sea.PNG);
color: #fff;
font-weight: bold;
width:10%;
height: 43px;
border: 0;
float: left;
border-top: 4px solid orange;
border-bottom: 4px solid orange;
border-right: 4px solid orange;
}
.invitebox input {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
margin-top:0.2cm;
margin-left:1cm;
width:70%;
height: 32px;
float: left;
font-size:15pt;
padding: 2px;
border-top: 4px solid orange;
border-bottom: 4px solid orange;
border-left: 4px solid orange;
}
.invitebtn input {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
margin-top:0.2cm;
background-image: url(sea.PNG);
color: #fff;
font-weight: bold;
width:10%;
height: 43px;
border: 0;
float: left;
border-top: 4px solid orange;
border-bottom: 4px solid orange;
border-right: 4px solid orange;
}
</style>
</head>
<body >
<table width="100%">
<tr>
<td> <label style="font-size:12pt">Search Names</label></td>
</tr>
</table>
<br>
<table>
<tr>
<td></td>
<td></td>
<td><label style="font-size:12pt">Choose one of the following options to search our directory of Names</label></td>
<td></td>
<td></td>
</tr>
</table>
<div align="center">
<div class="searchbox"><input type="text" name="searchbox" id="searchbox"></div>
<div class="sea"><input name="search" type="button" id="btn"></div>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input value='' type='radio' id='one'/><label>Limit Search Results to Name</label></td>
</tr>
</table>
<br>
<br>
<div align="center">
<label style="font:bold;font-size:15pt">OR</label>
</div>
<br>
<div id="loadingScreen" align="center"></div>
<div align="center">
<div class="invitebox"><input type="text" name="invitebox" id="invitebox" ></div>
<div class="invitebtn"><input name="invite" type="button" ></div>
</div>
<div id="footer">
<div style="border-width:3px;border-height:6px;background-color:#00458D;" align="center">
<table>
<input type="button" value="Button1" style="width:20%" />
<input type="button" value="Button2" style="width:20%" />
<input type="button" value="Button3" style="width:20%"/>
<input type="button" value="Button4" style="width:20%" />
</table>
</div>
</div>
</body>
</html>