Câu hỏi Làm cách nào để di chuyển phần giữ chỗ lên trên tiêu điểm VÀ khi nhập?


Tôi muốn trình giữ chỗ di chuyển lên đầu khi hộp văn bản được lấy nét và trong khi người dùng đang nhập.

Tôi không chắc chắn nếu điều này chỉ là html / css hoặc javascript nào quá.

Css hiện tại của tôi trông như thế này, và tôi chưa có mã js:

input:focus::-webkit-input-placeholder {
    font-size: .75em;
    position: relative;
    top: -15px; 
    transition: 0.2s ease-out;
}

input::-webkit-input-placeholder {
    transition: 0.2s ease-in;
}

input[type="text"]:focus, input[type="password"]:focus {
    height: 50px;
    padding-bottom: 0px;
    transition: 0.2s ease-in;
}

input[type="text"], input[type="password"] {
    height: 50px;
    transition: 0.2s ease-in;
}

Nó gần như không làm việc (không hoàn hảo như liên kết), nhưng trình giữ chỗ biến mất khi tôi bắt đầu nhập. Tôi đang sử dụng twitter-bootstrap, nếu điều đó làm cho bất cứ điều gì dễ dàng hơn!

Cảm ơn.


19
2018-03-11 14:04


gốc


Nếu bạn chỉ kiểm tra trang đó bạn sẽ thấy rằng nó không phải là một trình giữ chỗ mà họ đang thao tác đó là một DIV đang trôi nổi trên đầu trang của INPUT. Bạn sẽ có thể tái tạo những gì đang xảy ra chỉ bằng cách xem mã trên trang web đó. - Billy Moat
Không thể thấy bất kỳ mã giữ chỗ nào, và tôi đã rất cố định về điều đó mà tôi không biết họ đang sử dụng một div khác. Vì vậy, không có cách nào để giữ chỗ giữ chỗ trong khi gõ? - Bivo Kasaju
Thiết kế Material Design Lite của Google sử dụng một hành vi tương tự. Đây là một ví dụ về cách triển khai tính năng như vậy với HTML / CSS / jQuery. Tôi nghĩ rằng bạn sẽ bằng cách nào đó cần JS nói chung để làm cho nó hoạt động tốt xung quanh. - Arnold Stoba
Trang được liên kết không sử dụng JS. Nó không cần thiết. Bạn có thể dùng pointer-events tài sản và :focus bộ chọn để làm việc theo cách của bạn xung quanh nó chỉ với CSS. - Enrico
@BivoKasaju liên kết được cung cấp không hoạt động nữa, hãy cân nhắc việc thay đổi hoặc sửa đổi câu hỏi - trainoasis


Các câu trả lời:


Bạn có thể làm như thế này

HTML:

<div>
  <input type="text" class="inputText" />
  <span class="floating-label">Your email address</span>
</div>

CSS:

input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label{
  top: 8px;
  bottom: 10px;
  left: 20px;
  font-size: 11px;
  opacity: 1;
}

.inputText {
  font-size: 14px;
  width: 200px;
  height: 35px;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: 18px;
  transition: 0.2s ease all;
}

Làm việc JSFiddle ở đây https://jsfiddle.net/273ntk5s/2/


43
2018-03-11 14:29



Vì một số lý do, nhãn nổi của tôi xuất hiện bên dưới hộp văn bản. Có lẽ bootstrap đang rối tung với mã của tôi. - Bivo Kasaju
@BivoKasaju Bạn có thể làm điều đó với css bằng cách thêm input:not(:focus):valid ~ .floating-label. Xem câu trả lời cập nhật của tôi và JSFiddle.
:not(:focus) sẽ kiểm tra nếu phần tử đầu vào không được tập trung và :valid kiểm tra xem giá trị đầu vào có hợp lệ hay không. Lưu ý: The :valid hoạt động khi bạn thêm required vào thẻ nhập html của bạn.
Có thể tôi đã trễ bữa tiệc, nhưng ở trên các giải pháp hoạt động, ngoại trừ khi đầu vào chứa type="email". Khi bạn tab bên ngoài trường này, nhãn nổi sẽ phát triển trở lại với kích thước cũ của nó. Bất cứ ai có một giải pháp / giải pháp cho việc này? - Martin van Houte
nó không hoạt động với hai hộp văn bản - niku


.user-input-wrp {
	position: relative;
	width: 50%;
}
.user-input-wrp .inputText{
	width: 100%;
	outline: none;
	border:none;
	border-bottom: 1px solid #777;
}
.user-input-wrp .inputText:invalid {
	box-shadow: none !important;
}
.user-input-wrp .inputText:focus{
	border-color: blue;
	border-width: medium medium 2px;
}
.user-input-wrp .floating-label {
	position: absolute;
	pointer-events: none;
	top: 18px;
	left: 10px;
	transition: 0.2s ease all;
}
.user-input-wrp input:focus ~ .floating-label,
.user-input-wrp input:not(:focus):valid ~ .floating-label{
	top: 0px;
	left: 10px;
	font-size: 13px;
	opacity: 1;
}
<h1>The floating label</h1>
<div class="user-input-wrp">
  <br/>
  <input type="text" class="inputText" required/>
  <span class="floating-label">Your email address</span>
</div>

Đã sửa đổi mã từ @ user1846747 một chút.


4
2018-03-04 07:52





Trang web đó không di chuyển trình giữ chỗ, nhưng đặt một div (.floating-label) trên đầu vào, vì vậy khi đầu vào được tập trung, div chỉ hoạt ảnh để vượt quá đầu vào. Phần quan trọng ở đây là sử dụng pointer-events: none; trong div nổi, vì vậy khi bạn nhấp vào nó sự kiện đi qua nó vào hộp đầu vào phía sau nó.


2
2018-03-11 14:12





span{
  display:block;
  }
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function() {
  $('input').focus(function(){
    placeholder = $(this).attr('placeholder');
    if(placeholder != undefined){
      $(this).parent().prepend('<span class="input-placeholder">'+placeholder+'</span>');
    }
  });
  $('input').blur(function(){
    $(this).parent().find('.input-placeholder').remove();
  });
});
</script>
<div>
  <input type="text" class="inputText" placeholder="Email adress" required/>
</div>


1
2017-10-04 18:52