当点击HTML/CSS按钮时，更改为输入字段和提交按钮

HTML/CSS Button when clicked changes into input field and submit button

本文关键字：按钮 输入 字段 提交 HTML CSS      更新时间：2023-09-26

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

演示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');
});

使用标签、焦点和转换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>

你可能可以做一些简单的事情，比如。。。将宽度从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

您需要CSS和Javascript的组合来实现这个

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

将JS点击事件绑定到按钮（JQuery是一个更好更快的选项），并设置textbox display=block。若要设置动画，请使用Jquery animate或任何动画预设来显示文本框。外观依赖于你的css样式

查看此线程以获取更多见解

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

相关文章：