使用输入框时，.slideDown（）无法正常工作

时间：2012-08-19 01:26:11

标签： jquery html

我有一个表单，当有人选择其他时，额外的输入框将向下滑动。我的问题是，所有这些都有效，除非我输入输入框时没有任何内容。我已尝试在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风格。但仍然没有雪茄。

1 个答案:

答案 0 :(得分：0)

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

相关问题
最新问题