单击时的HTML / CSS按钮变为输入字段并提交按钮[关闭]答案

【问题标题】：HTML/CSS Button when clicked changes into input field and submit button [closed]单击时的HTML / CSS按钮变为输入字段并提交按钮[关闭]
【发布时间】：2014-04-08 15:02:28
【问题描述】：

您将如何在我的网站上制作一个可点击的按钮，该按钮会变成带有<submit> 按钮的<input> 字段？单击按钮后，我希望它向右滑动，然后文本输入表单将进入并位于其旁边。我不知道我应该使用 CSS 还是 JavaScript。有什么帮助吗？

【问题讨论】：

使用 JavaScript，因为您需要 onClick 功能。
你可以使用 CSS 和过渡，javascript 更新 CSS 循环和计时器，给我们一个小提琴
您将需要 javascript 来实现这一点。您还应该使用 jQuery，主要用于“幻灯片”效果
在您提供您首先实际完成的内容以及当前代码的外观之前，您不会对这个问题有太多的运气。然而，用 JS 点缀的 CSS 应该可以满足您的需求。
旁注：我以后会避免“什么是最好的/最快的”类型的问题。他们几乎总是基于意见。

标签： javascript jquery html css

【解决方案1】：

Demo Fiddle

这并不完美，只是一个起点，但一个基本前提可能是：

HTML

<form>
    <button>Slide In!</button>
    <div>
        <input type='text' />
        <input type='submit' />
    </div>
</form>

CSS

form {
    position:relative;
}
form div {
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    overflow:hidden;
    transition:all 1s ease-in;
}
form div.active {
    left:0;
}

jQuery

$('button').on('click', function (event) {
    event.preventDefault();
    $('form div').addClass('active');
});

【讨论】：

好的，谢谢你，我去看看我能不能让它工作。
如果以这种方式实现，最好使用具有这种效果的固定宽度/偏移量
好的，谢谢伙计，现在看来没问题，如果我需要什么，我会告诉你的。
看看这里的一些调整：jsfiddle.net/3tVnD/1
完美男人。这正是我所需要的。再次感谢，我很感激。

【解决方案2】：

使用标签、焦点和过渡 CSS 可以做一些非常接近问题的事情： http://codepen.io/anon/pen/gualw/

form {
  line-height: 1.7em;
}

label {
  /* make it look like a button */
  width: 4em;
  float: left;
  overflow: hidden;
  margin: 0.25em;
  box-shadow: 0 0 0 1px;
  border-radius: 5px;
  line-height: 1.2em;
  text-align: center;
  background: #4285F4;
  margin-left: 0;
  transition: 0.5s;
}

input {
  float: left;
  clear: left;
  margin: 0.25em 0.25em 0.25em -50%;
}

input:focus {
  transition: 0.5s;
  margin: 0.25em 0;
}

input:focus+label {
  margin-left: -50%;
  transition: 0.5s;
}

<form>
  <input id="ipt1" />
  <label for="ipt1"> input 1 </label>
  <input id="ipt2" />
  <label for="ipt2"> input 2 </label>
  <input id="ipt3" />
  <label for="ipt3"> input 3 </label>
</form>

【讨论】：

哇，谢谢，这也很有帮助！
是的，它允许一个一个地滑动表单元素，甚至是 textarea，检查我用文件输入和 textarea 更新它的演示 :)
好的，非常感谢。
反对 JavaScript！

【解决方案3】：

您可能可以做一些简单的事情......将宽度从 0 设置为某个值......

HTML

<input type="text" id="input-txt">
<input type="button" id="input-btn" value="Go">

CSS

#input-txt {
    width: 0;
    transition: width 1s ease-in;
}

#input-txt.active {
    width: 250px;
}

点 o' JS

document.getElementById('input-btn').addEventListener('click', function () {
    document.getElementById('input-txt').classList.add('active');
});

DEMO

【讨论】：

感谢您的帮助，我想通了。
很好，只是表明你不必使用jQuery来添加一个类。
谢谢，我很感激，学习新事物总是很好。 :)

【解决方案4】：

你需要结合 CSS 和 Javascript 来实现这一点

在设计中，通过 css 使文本框 display=none

将 JS 点击事件绑定到按钮（JQuery 是更好更快的选择）并设置文本框 display=block。要制作动画，请使用 Jquery animate 或任何动画预设来显示文本框。外观和感觉取决于您的 CSS 样式

查看此thread 了解更多信息

【讨论】：

【解决方案5】：

您可以将两者结合使用。 CSS 来制作动画，JavaScript 来创建触发这些动画的函数。 onClick 事件是一个很好的起点。

【讨论】：

谢谢哥们。感谢您的帮助。
没问题，很乐意提供帮助。