占位符幻灯片JQ未显示

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的错误，或者是否是预期的行为。然而，似乎如果您通过删除样式属性重绘元素的动画完成后的工作：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"); 
}