将按钮更改为输入表单

Question

如何制作一个按钮，点击按钮后appearance/function变成输入框？喜欢这里的按钮：https://wake.io/.

html

<div id="button">Button</div>

<form name="input" action="#" method="get" style="display: none;">
    <input type="text" id="comment" placeholder="E-mail..."/>
</form>

jquery

$('#button').click(function(){
   $(this).hide();
   $('form').show();
});

jsFiddle

Answer 1

基本上这就可以了，但是有很多方法可以实现，这只是一种方法。也就是说，代码是这样的：

html代码：

<div id="button-wrapper"><button id="button">Subscribe</button></div>

jquery代码：

<script>
$(function(){
    $("#button-wrapper button").click(function(){

        $("#button-wrapper").html('<input type="text" />');
        $("#button-wrapper input").focus();
    });
});
</script>

jsFiddle

将按钮更改为输入表单

Change button to input form

html

jquery

input

button