Question

我需要一些帮助。我正在尝试重现google chrome用户登录页面，但该表格的输入字段卡住了（真的卡住了，我什至都不知道从哪里开始）。

我尝试检查chrome页面，但很难理解如何重现其效果

让我用一些代码来解释自己。

因此，当我单击该字段之一时，我希望表单中的占位符像chrome一样出现。

我真的不知道如何重现这种效果... 点击之前： not selected 点击后： result

<input type="text" name="user-name" placeholder="Username"></input>
<input type="password" name="password" placeholder="Password"></input>

input{
border:solid 1px #222;
}
input:focus{
border:solid 2px #ddb760;
}

Answer 1

具有CSS transform和:placeholder-shown伪类。技巧是，您必须在输入中添加一个占位符（作为值的空格）属性 -placeholder=" "。

.g-input {
  position: relative;
  margin-bottom: 10px;
  box-sizing: border-box;
  display: inline-block;
}
.g-input label {
  background: white;
  padding: 3px;
  font-size: 12px;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: bottom left;
  color: #ddd;
  font-family: arial;
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 1;
  cursor: text;
}

.g-input input, .g-input textarea {
  border: 1px solid #ddd;
  display: block;
  padding: 10px;
  border-radius: 3px;
  width: 100%;
  box-sizing: border-box;
}

.g-input.fill {
  display: block;
  width: 100%;
}

.g-input input:focus, .g-input textarea:focus {
  outline: 0;
  border-color: #1873e8;
}

.g-input input:focus+label, .g-input input:not(:placeholder-shown)+label,
.g-input textarea:focus+label, .g-input textarea:not(:placeholder-shown)+label{
  transform: translateX(-3px) translateY(-15px);
  font-size: 10px;
  color: #1a73e8;
}

<div class="g-input">
  <input type="text" id="user-name" name="user-name" placeholder=" ">
  <label for="user-name">Username</label>
</div>
<div class="g-input">
  <input type="password" id="password" name="password" placeholder=" ">
  <label for="password">Password</label>
</div>

<div class="g-input fill">
  <input type="text" id="user-name2" name="user-name2" placeholder=" ">
  <label for="user-name2">Username</label>
</div>
<div class="g-input fill">
  <input type="password" id="password2" name="password2" placeholder=" ">
  <label for="password2">Password</label>
</div>

<div class="g-input fill">
  <textarea id="ta" name="ta" placeholder=" "></textarea>
  <label for="ta">Textarea</label>
</div>

Answer 2

Google设法使它看起来像placeholder，但它只是一个div，其文字在输入上方悬停。

这几乎就是方法。

var text = document.getElementById("text");
var label = document.getElementById("label-text");

text.addEventListener("focusout", onfocusout);

function onfocusout(e) {
	if (text.value.length > 0) text.classList.add('not-empty');
	else text.classList.remove('not-empty');
}

// allow focus of the input even on click of div
label.onclick = function(e) {
	text.focus();
}

.input-group {
  position: relative;
}

#text {
  padding: 10px;
  
  border: 1px solid black;  
  outline: none;
}

#label-text {
  padding: 0 5px;

  position: absolute;
  top: 10px;
  left: 5px;
  
  background-color: #fff;
  color: #999;
  
  transition: .2s;
}

#text:focus {
  border-color: blue;
}

#text:focus + #label-text {  
  color: blue;
}

#text:focus + #label-text, #text.not-empty + #label-text {
  top: -10px;
  left: 5px;
}

<br><br>

<div class="input-group">
  <input id="text" type="text" onfocusout="" />
  <div id="label-text">Username</div>
</div>

Answer 3

也许这样可以帮助您：

HTML：

export class child_component_two implements OnInit {
  constructor() { }

  // send data to other components
  @Output() pageTitle: string = 'Child component two title';

  ngOnInit() {
  }
}

CSS：

<input type="text" name="user-name" placeholder="Username" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Username'">
<input type="password" name="password" placeholder="Password" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Password'">

提琴： https://jsfiddle.net/x9khyv71/

如何重现Google登录表单的效果

3 个答案: