输入字段在 jQuery 的 slideUp()/slideDown() 上清空

Question

我有一个带有一些文本的输入字段，我正在尝试切换其可见性。我遇到的问题是，在字段上切换幻灯片动画后，其文本是不可见的。但是，当字段成为焦点时，文本将再次可见。

我已经在Safari/IE/FF上对此进行了测试，输入文本仍然可见，但是我无法弄清楚为什么Chrome表现得如此奇怪。

http://jsfiddle.net/f63Et/1/

Answer 1

问题是jQuery在执行.slideDown()时将输入的显示设置为inline-block，这使得Chrome无法正确呈现它。

您有几个选项，例如将输入包装在div 中，或将显示设置为阻止

Answer 2

你可以尝试通过输入 slideDown（） 的回调来手动聚焦它：

$(this).focus()

Answer 3

这并不能回答为什么Chrome行为异常的问题，但是，作为一种解决方法，如果您将输入包含在div中：

<div id="text"><input type="text" /></div>

然后slideTogglediv：

$(document).on('click', '#slide', function() {
    $('#text').slideToggle();
});

这似乎适用于Chrome。

Answer 4

作为变体，您可以使用$('input').toggle('slow')