Question

如何制作一个按钮，单击按钮时会将外观/功能更改为输入字段？就像这里的按钮一样：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

更改按钮以输入表格

1 个答案: