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

Question

我有一个表单，当有人选择其他时，额外的输入框会向下滑动。我的问题是，所有这些都有效，除非我在输入框中输入任何内容。我已尝试在 IE 最新版本中执行此操作，并且我能够输入。火狐也一样。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 样式。但仍然没有雪茄。

score 0 · Accepted Answer

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

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

1 回答 1

Related

Reference