使用输入框时.slideDown()无法正常工作

我有一个表单，当有人选择其他表单时，额外的输入框将向下滑动。我的问题是，所有这些都有效，除了当我在输入框中输入时，什么都不会输入。我已经尝试过在IE中输入，我可以输入。Firefox也是如此。Chrome是不起作用的地方。当我进入开发工具（对于Chrome）并关闭输入框中的值，然后重新打开它时，我可以键入。

代码：这是我用于输入框的代码。我确实实现了脚本。

<div class="other">testing</div>
<input type="text" class="otherbox" />
<input type="text" class="otherbox" />
<input type="text" class="otherbox"/>
<script>
$(".other").click(function () {
$(this).css({ borderStyle:"inset", cursor:"wait" });
$(".otherbox").slideDown(1000,function(){
$(this).css("border", "2px red inset")
//.filter(".otherbox")
 //.css("background", "yellow")
 //.focus();
$(".other").css("visibility", "hidden");
});
});
</script>

CSS代码：

.other { background:#cfd; margin:3px; width:50px; 
text-align:center; float:left; cursor:pointer;
border:2px outset black; font-weight:bolder; }
.otherbox { display:none; width:120px; float:left; 
margin:10px; }

更新------------------------------------------------------------

<html>
<body>
        <div id="MainContainer">   
            <h2 align="center">
                <u></u>
           </h2>
         <div class="FormContainer">
            <form name="theform" action="insert.php" method="post" >
                <div class="CheckBoxContainer">
            <input type="checkbox" value"On" name="only-thisform"/>
            <br>
            <br>
            <input type="checkbox"  value="On" name="approval" id="approval"/>
            </div><!------------------------------------END   .CheckBoxContainer ------------------------------------------->
            <br>
            <br>

<script type="text/javascript"
     src="http://code.jquery.com/jquery-latest.min.js">
</script>   
<!-- javascript on client-side -->

<div class="DropDownSelector">
    <div class="DropdownDiscription"> </div>
</div> <!------------------------------------------END .DropDownSelector -------------------------------------------------------->
<br>
<div class="other">testing</div>
<input type="text" class="otherbox" />
<input type="text" class="otherbox" />
<input type="text" class="otherbox"/>
<script>
$(".other").click(function () {
$(this).css({ borderStyle:"inset", cursor:"wait" });
$(".otherbox").slideDown(1000,function(){
$(this).css("border", "2px red inset")
//.filter(".otherbox")
 //.css("background", "yellow")
 //.focus();
$(".other").css("visibility", "hidden");
});
});
</script>
<div class="FormBody">
    <div class="InputContainer">
<span class="InputDiscription">Insurance Company Name: </span><div class="InputInner"> <input type="text" name="compname" id="compname" ></div><!----- END .InputInner ---------->

</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
    <div class="InputContainer">
<span class="InputDiscription">Insurance Phone number: </span><div class="InputInner"><input type="text"  name="phone" id="phone"></div><!----- END .InputInner ---------->

</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
    <div class="InputContainer">
<span class="InputDiscription">Policy Number: </span><div class="InputInner"><input type="text" name ="policynum" id="policynum"></div><!----- END .InputInner ---------->

</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
    <div class="InputContainer">
<span class="InputDiscription">Name of the Policyholder: </span><div class="InputInner"><input type="text" name="nameofPolicyholder" id="nameofPolicyholder"></div><!----- END .InputInner ---------->

</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
    <div class="InputContainer">
<span class="InputDiscription">Policyholder mailing address: </span><div class="InputInner"><input type="text" name="mailing" id="mailing"></div><!----- END .InputInner ---------->

</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
    <div class="InputContainer">
<span class="InputDiscription">City: </span><div class="InputInner"><input type="text" name="city" id="city"></div><!----- END .InputInner ---------->

</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
    <div class="InputContainer">
    <!------------------------------------------STATE SELECTION CODE ------------------------------------------->
  <select name=<?=$name;?> id="state" onChange="submitform()">

<span class="InputDiscription">State: </span><div class="InputInner">
<input type="hidden" id="hiddenfield" name="hiddenfield" value="">
 </div><!----- END .InputInner ---------->

</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
<div class="InputContainer">
<span class="InputDiscription">Zipcode: </span><div class="InputInner"><input type="text" name="zipcode" id="zipcode"></div><!----- END .InputInner ---------->

</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
<br>
<div class="InputContainer">
<span class="InputDiscription">Year Of Vehicle: </span><div class="InputInner"><input type="text" name="YearOfVehicle" id="YearOfVehicle"></div><!----- END .InputInner ---------->

</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
<div class="InputContainer">
<span class="InputDiscription">Make Of Vehicle: </span><div class="InputInner"><input type="text" name="MakeOfVehicle" id="MakeOfVehicle"></div><!----- END .InputInner ---------->

</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
<div class="InputContainer">
<span class="InputDiscription">Model Of Vehicle: </span><div class="InputInner"><input type="text" name="ModelOfVehicle" id="ModelOfVehicle"></div><!----- END .InputInner ---------->

</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
<div class="InputContainer">
<span class="InputDiscription">Vehicle Identification Number: </span><div class="InputInner"><input type="text" name="Vehicleid" id="Vehicleid"></div><!----- END .InputInner ---------->

</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
<div class="InputContainer">
<span class="InputDiscription">Policy Effective Date: </span><div class="InputInner"><input type="text" name="Policyeffdate" id="Policyeffdate"></div><!----- END .InputInner ---------->

</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
<div class="InputContainer">
<span class="InputDiscription">Policy Expiration Date: </span><div class="InputInner"><input type="text" name="Policyexpdate" id="Policyexpdate"></div><!----- END .InputInner ---------->

</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
<br>
<h2>Employee Information</h2>
<div class="InputContainer">
<span class="InputDiscription">Employee Name: </span><div class="InputInner"><input type="text" name="EmployeeName" id="EmployeeName"></div><!----- END .InputInner ---------->

</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
<br>
<div class="InputContainer">
<span class="InputDiscription">Employee Company Name: </span><div class="InputInner"><input type="text" name="EmployeeCompanyName" id="EmployeeCompanyName"></div><!----- END .InputInner ---------->

</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
<div class="InputContainer">
<span class="InputDiscription">Agency/Franchise Number (or unique indicator): </span><div class="InputInner"><input type="text" name="Agency/FranchiseNumber" id="Agency/FranchiseNumber"></div><!----- END .InputInner ---------->

</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
<div class="InputContainer">
<span class="InputDiscription">Todays Date: </span><div class="InputInner"><input type="text" name="TodaysDate" id="TodaysDate" value="

</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
<div class="CheckBoxContainer">
            <input type="checkbox" value"On" name="correct"/>The above printed name serves to identify the employee and shows intent of the employee that the above auto insurance information given is accurate.  
            <br>
            <br>
            <input type="checkbox"  value="On" name="agree" id="agree"/>The employee identified above confirms this document has been read, reviewed and understood and subsequently authorizes it as such. 
             <br>
             <br>
             <input type="checkbox"  value="On" name="understood" id="understood"/>The employee understands that if inaccurate information is discovered on the above auto insurance information table, on the employee's auto policy itself or if the auto insurance policy is cancelled for any reason, the employer will be notified. 
            </div><!------------------------------------END   .CheckBoxContainer ------------------------------------------->
            <br>


<input type="Submit" name="Submit" >
</div><!-------------------------------------------END .FormBody ------------------------------------------------------->
</form>

    </div><!--------------------------------------End .FormContainer ---------------------------------------------->
</div><!----------------------------------End #MainContainer----------------------------------->
</body>
</html>

更新-------------------------

我还试着用制作一个单独的.php文件

<div class="other">testing</div>
<input type="text" class="otherbox" />
<input type="text" class="otherbox" />
<input type="text" class="otherbox"/>
<script>
$(".other").click(function () {
$(this).css({ borderStyle:"inset", cursor:"wait" });
$(".otherbox").slideDown(1000,function(){
$(this).css("border", "2px red inset")
//.filter(".otherbox")
 //.css("background", "yellow")
 //.focus();
$(".other").css("visibility", "hidden");
});
});
</script>

和css样式。但仍然没有雪茄。

我猜这个页面上还有其他事情正在影响有问题的输入。我在这里创建了一个jsfiddle，我可以在Chrome中的字段中输入数据。试试我提供的小提琴，如果它对你有效，还有其他事情发生。

相关内容

最新更新

热门标签：