JQuery滑动切换问题

当然有一个明显的答案，但我不知道。我正在使用JQuery

.load（）

动态加载页面。在“已加载”页面上，有一个包含表单元素的表单，例如

input type=“number”

（HTML5）

如果我滑动切换（）表单，表单元素总是返回到

input type=“text”

，但是如果我滑动切换（）-（只是

toggle（）

）表单元素仍然是“true”，同样，如果我添加

toggle（'slow'）

表单元素总是返回到

input type=“text”

嗯。“page1”上的HTML代码如下所示：

<form method="post" id="frmcreate">
<ol></ol>
<input type="submit" id="testit" />
</form>

$('.optoggle').live('click',function(){
    $(this).next('div').toggle();
});

---

在FF（3.6.13）上，它警告“文本”，在Chrome上警告“数字”。猜测由于FF不知道“数字”类型，它将恢复为默认的“文本”。

看起来您的问题是多方面的

我创建了这个更新的小提琴来帮助显示问题：

在firefox和IE中，Chris是完全正确的。firefox不支持“数字”类型，因此它总是将其视为“文本”。如果加载小提琴并点击alert，它将显示“文本”。显然这是不正确的，但firefox不知道如何处理“数字”“类型。如果您检查firebug中的输入框，您将看到它实际上说的是type=“number”，只是警告错误。无论您执行何种切换或滑动切换，此行为都将保持真实

在chrome中，它看起来像一个bug。鉴于HTML5还不是一个官方标准，这是可以理解的，也是一个发布bug报告的绝佳机会。看起来Chrome在重画数字类型时无法正确呈现数字类型。在小提琴中，如果滑动切换1，然后滑动切换2，数字微调器将返回。这就是为什么我认为这是一个问题，重画它-一些与儿童/家长的东西，我打赌。此链接包含有关报告Chrome中错误的信息：

在safari中，问题有点不同。支持数字类型，但实际未处理。简言之，这意味着Safari可以识别输入与“文本”框不同，但实际上并不处理这些信息。本质上，对待Safari和对待Firefox/IE一样

---

简言之，我想你的问题的真正答案是现在避免数字输入。它们在大多数浏览器中都不受支持（只有一个），而在支持它们的浏览器中（实际上，只有Chrome），它们都有缺陷。等等-HTML5很快就会很棒：）

就像@jwegner指出的那样，你的问题不在于jQuery，而在于浏览器对HTML5的支持

现在，Google Chrome是唯一一个理解

的浏览器。我的意思是“唯一的”，因为它在最终版本上有。Firefox4和InternetExplorer9承诺都会理解这个属性，但现在都是Beta版或RC版，不能考虑

和指针一样，Chrome也有一个bug：当父对象被设置动画时，数字字段上的子箭头保持隐藏。如果您集中输入并使用键盘箭头，您将看到它仍然可以用作数字字段。“只是”外表是错误的

使用

toggle（）

时不会发生这种情况，因为父对象没有设置动画，只是再次变为隐藏和可见。但是使用

切换（“slow”）

会出现一个动画，然后还会出现所描述的bug

我在这里发布了一个解决方法：，它基于此：当滑出时，可以使用动画。但要再次出现，它必须立即出现

另一种解决方法是使用

fadeIn（）

和

fadeOut（）

而不是

slideUp（）

和

slideDown（）

。由于某种原因，“淡入淡出”不会导致错误

---

无论如何，最好的选择是暂时避免使用

type=“number”

。毕竟，您不希望您的页面仅在Chrome中工作，对吗？

您在不同的浏览器中检查过这种行为吗？是一样的吗？是的，但对那些感兴趣的人来说，现在只需“仔细检查”演示：@Matt感谢演示-它在Chrome上对我来说仍然是“数字”。@Matt:你的演示没有加入ajax。不是准确的复制。埃里克，非常感谢，非常好的评论/知识/研究。你是对的，我不希望我的页面只在Chrome上工作——我希望看看我是否能管理它。我会检查你的小提琴-还没做。谢谢

Type <input type="text" name="fieldmeta<?php echo $y; ?>[type]" /> <?php echo $error; ?> 
<br/>
Name <input type="text" name="fieldmeta<?php echo $y; ?>[name]" value="<?php echo $y; ?>" /> <?php echo $error; ?> 
<br/>
<div class="optoggle">OPTIONS</div>

<li>Cols<input type="number" name="fieldmeta<?php echo $y; ?>[cols]" /> <?php echo $error; ?></li>
<li>Rows<input type="number" name="fieldmeta<?php echo $y; ?>[rows]" /> <?php echo $error; ?></li>
<li>Size<input type="number" name="fieldmeta<?php echo $y; ?>[size]" /> <?php echo $error; ?></li>

$('.optoggle').live('click',function(){
    $(this).next('div').toggle();
});