Tôi có một đầu vào như thế này:HTML - Giữ giữ chỗ khi người dùng nhập
<input value="My text" placeholder="Placeholder">
Khi tôi gõ một cái gì đó trong đầu vào văn bản giữ chỗ sẽ biến mất, đó là khá rõ ràng.
Bây giờ, những gì tôi muốn làm là tôi muốn các văn bản giữ chỗ để ở lại khi người dùng nhập, do đó bạn có thể thấy văn bản giữ chỗ như một văn bản nền phía sau văn bản gốc:
EDIT : Tôi cũng muốn có thể thay đổi văn bản nền bằng JavaScript.
Khó nghĩ về một ứng dụng tốt cho hành vi như vậy, vì nó chặn một số đầu vào của người dùng.
Cách dễ dàng là sử dụng input::after nhưng điều này hiện không được bất kỳ trình duyệt nào hỗ trợ (nhờ @ JukkaK.Korpela).
Nhưng bạn có thể sử dụng một yếu tố wrapper và một thuộc tính dữ liệu, như sau:
<div class="placeholder" data-placeholder="my placeholder">
<input value="My text" />
</div>
Với css này:
.placeholder
{
position: relative;
}
.placeholder::after
{
position: absolute;
left: 5px;
top: 3px;
content: attr(data-placeholder);
pointer-events: none;
opacity: 0.6;
}
Hệ quả là: 
Vì bạn sẽ phải làm rất nhiều tinh chỉnh để làm cho này nhìn tốt, bạn cũng có thể xem xét sử dụng <div> yếu tố gói như một đầu vào "giống nhau":
<div class="editable" data-placeholder="my placeholder">
<input type="text" value="my Text" />
</div>
CSS:
.editable
{
position: relative;
border: 1px solid gray;
padding: 3px;
background-color: white;
box-shadow: rgba(0,0,0,0.4) 2px 2px 2px inset;
}
.editable > input
{
position: relative;
z-index: 1;
border: none;
background-color: transparent;
box-shadow: none;
width: 100%;
}
.editable::after
{
position: absolute;
left: 4px;
top: 5px;
content: attr(data-placeholder);
pointer-events: none;
opacity: 0.5;
z-index: 1;
}
Rất hay, nhưng đối với tôi, văn bản "giữ chỗ của tôi" hơi nhỏ trong phần "Văn bản của tôi", nó vẫn vui vẻ trong cả Chrome & Firefox, dù sao thì cũng khắc phục điều đó? – super
Không theo cách bạn muốn. Bạn có thể tạo nền trong suốt cho '' và sử dụng 'z-index' để thay đổi xếp chồng, nhưng điều này đang trở nên khá xấu: http://jsfiddle.net/dkoruadc/1/. Bạn cũng có khả năng gặp sự cố với các trình duyệt và hệ điều hành khác nhau. –
Văn bản do người dùng viết cũng sẽ trở nên ít đọc được hơn. Tại sao bạn ở nơi đầu tiên thử điều này? – Meer
Giải pháp tốt hơn với hiệu ứng dễ dàng thông qua CSS.Hãy xem: http://jsfiddle.net/csdtesting/wbqq129q/
Code:
#login {
font-size: 12px;
margin: 0 auto;
width: 700px;
}
#login li {
float: left;
list-style: none;
margin-left: 30px;
position: relative;
}
#login li:first-child {
margin-left: 0;
}
label {
line-height: 40px;
position: absolute;
right: 120px;
top: 0;
bottom: 0;
-moz-transition: 0.3s right ease;
-ms-transition: 0.3s right ease;
-o-transition: 0.3s right ease;
-webkit-transition: 0.3s right ease;
transition: 0.3s right ease;
z-index: 0
}
input {
color: transparent;
font-size: 12px;
height: 35px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-transition: 0.3s all ease;
-ms-transition: 0.3s all ease;
-o-transition: 0.3s all ease;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}
input[type="email"],
input[type="password"] {
border: 1px solid #ccc;
height: 35px;
padding: 0 10px;
width: 240px;
position: relative;
-moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, .06);
-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, .06);
box-shadow: inset 0 0 10px rgba(0, 0, 0, .06);
z-index: 2;
}
input[type="email"] {
color: rgba(47, 130, 194, .8);
}
/* Placeholder */
input[type="email"]:-moz-placeholder {
color: rgba(47, 130, 194, .6);
}
input[type="email"]:-ms-input-placeholder {
color: rgba(47, 130, 194, .6);
}
input[type="email"]::-webkit-input-placeholder {
color: rgba(47, 130, 194, .6);
}
/* Label */
input[type="email"] + label {
color: rgb(47, 130, 194);
}
input:focus + label {
right: 10px;
}
input[type="email"]:focus,
input[type="password"]:focus {
background-color: rgba(255, 255, 255, .8);
}
/* Submit */
input[type="submit"] {
background-color: #333;
background: -moz-linear-gradient(bottom, #333, #444);
background: -ms-linear-gradient(bottom, #333, #444);
background: -o-linear-gradient(bottom, #333, #444);
background: -webkit-linear-gradient(bottom, #333, #444);
background: linear-gradient(bottom, #333, #444);
border: 1px solid #222;
color: #fff;
cursor: pointer;
height: 35px;
width: 110px;
}<form id="login">
<ul>
<li>
<input id="email" name="email" placeholder="Your Email" title="Your Email" type="email" required />
<label for="email">Your Email</label>
</li>
</ul>
</form>Nhưng đó không phải là điều tôi muốn đạt được. – super
Điều này có thể được thực hiện bằng cách sử dụng 'onchange' xử lý. Bạn sẽ viết một chức năng ưa thích mà sẽ concatnder phần còn lại của giữ chỗ vào những gì người dùng đã gõ, và cũng sẽ đặt con trỏ ở cuối văn bản của người dùng.
Dưới đây là một số chưa được kiểm tra, js không đầy đủ/psuedocode để cung cấp cho bạn một ý tưởng:
userTextLength: 0, // measure of how many chars the user has typed; need this because the length itself won't be a valid measure, since we're modifying it in place. Note that we're using the DOM as a source of truth here... alternative method would be to store the user's text itself here, but let's run with this.
placeholder: "xx/yy/zz",
onchange: function() {
boxText = document.querySelector('#elem').value;
if (boxText.length === 1) { // special handling for the first character they type. (Using placeholder text at first.)
this.userTextLength++;
placeholder = boxText.slice(userTextLength);
userText = boxText.slice(0, userTextLength);
document.querySelector('#elem').innerHTML = userText + placeholder;
}
if (boxText.length < placeholder.length) { // this would mean they used backspace, which also needs to be handled.
}
else { // the normal case, should look quite similar to the first if block
this.userTextLength += 1;
userInput =
}
}
Cái gì tôi đã không được xử lý ở đây là con trỏ tập trung. Điều đó sẽ cần sự kiện 'onfocus' và sẽ sử dụng thuộc tính userTextLength để quyết định vị trí đặt nó. Để được trợ giúp về việc đó, this answer có vẻ như hữu ích.
tôi nghĩ đó không phải là một thực hành tốt. bạn có thể sử dụng sẽ vẫn ở đó. hoặc chỉ hiển thị tiêu đề đầu vào
@Meer Bạn có thể đưa ra một ví dụ không? Giống như fiddle? – super
@Tambo Bạn có thể đưa ra một ví dụ không? Giống như fiddle? – super