0

我在 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>
4

2 回答 2

1

我为您创建了一个jsfiddle 示例。我还添加了@Darthur 给出的轮廓边框代码。您的 HTML 或 CSS 没有问题。请检查那个jsfiddle。问题可能出在您的 javascript 文件上。

于 2012-05-12T11:17:56.310 回答
0

这是在焦点上显示的轮廓边框。

input您可以通过将其添加到您的 CSS 来为所有元素禁用它:

input:focus{
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

请注意,如果窗口的背景不是白色,则需要更改颜色。

于 2012-05-12T10:52:53.070 回答