幻灯片jq中未显示输入的PlaceHolder

Question

我有一个按钮：

<a  data-role="button" data-transition="none"
data-theme="b" onclick="ShowInput();" data-icon="forward" data-iconpos="left">
</a>

点击按钮，输入向下滑动：

function ShowInput() {
    $('#IdIn').slideDown("slow");
}

我的意见：

<input placeholder="xxx" name="NameIn" id="IdIn" value="" type="text">

滑动有效，但看不到输入的占位符'xxx'

为什么？

Answer 1

这里的问题是如果输入元素不足以容纳它，占位符就会消失。如果您稍后应该更改高度，则不会重新出现，这就是使用slideDown()时发生的情况。

我不确定这是否是特定于Chrome的错误，或者是否有预期的行为。但是，如果通过在动画完成时删除style属性来重绘元素，它似乎有效：http://jsfiddle.net/QYp9Y/

$('#IdIn').slideDown("slow", function() {
    $(this).removeAttr('style').show();
});

Answer 2

定义一个容器来容纳输入元素，然后显示/隐藏容器而不是输入。

<div id="IdContainer">
<input placeholder="xxx" name="NameIn" id="IdIn" value="" type="text">
</div>

然后在javascript中，

function ShowInput() {
    $('#IdContainer').slideDown("slow");
}