Javascript HTML - 用户键入时保留占位符

HTML - Keep placeholder when user types

提问by super

I have an input like this:

我有这样的输入：

<input value="My text" placeholder="Placeholder">

When I type something in the input the placeholder text will disappear, that's quite obvious.

当我在输入中输入内容时，占位符文本将消失，这很明显。

Now, what I want to do is that I want the placeholder text to stay when the user types so you can see the placeholder text as a background text behind the original text:

现在，我想要做的是我希望占位符文本在用户键入时保留，以便您可以将占位符文本视为原始文本后面的背景文本：

EDIT: I also want to be able to change the background-text using JavaScript.

编辑：我还希望能够使用 JavaScript 更改背景文本。

采纳答案by Nico O

Hard to think of a good usecase for such a behaviour, as it is blocking some of the users input.

很难为这种行为想出一个好的用例，因为它会阻止一些用户输入。

An easy way would be to use input::afterbut this is not supported by any browser right now (thanks @JukkaK.Korpela).

一种简单的方法是使用，input::after但目前任何浏览器都不支持这种方式（感谢 @JukkaK.Korpela）。

But you can use a wrapper element and a data attribute, as follows:

但是您可以使用包装元素和数据属性，如下所示：

<div class="placeholder" data-placeholder="my placeholder">
    <input value="My text" />  
</div>

With this css:

有了这个CSS：

.placeholder
{
    position: relative;
}

.placeholder::after
{
    position: absolute;
    left: 5px;
    top: 3px;
    content: attr(data-placeholder);
    pointer-events: none;
    opacity: 0.6;
}

Resulting in:

导致：

Click here for jsFiddle demo.

单击此处查看 jsFiddle 演示。

---

---

Since you will have to do a lot of tweaking to make this look good, you may also consider using the wrapping <div>element as a input "look alike":

由于您必须进行大量调整才能使其看起来不错，因此您还可以考虑使用包装<div>元素作为“外观相似”的输入：

<div class="editable" data-placeholder="my placeholder">
    <input type="text" value="my Text" />
</div>

CSS:

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;
}

Click here for the Demo 3. (with mocked <input />)

单击此处查看演示 3。（带有模拟<input />）

Click here for the Demo 2. (with contenteditable)

单击此处查看演示 2。（可编辑）

回答by Giannis Grivas

Much better solution with ease effect via CSS. Take a look: http://jsfiddle.net/csdtesting/wbqq129q/

通过 CSS 轻松实现更好的解决方案。看看：http: //jsfiddle.net/csdtesting/wbqq129q/

• Before typing:

• 打字前：

• While typing:

• 打字时：

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>

回答by Nguy?n Duy Thành

it is impossible, if it is, it will be very unattractive. But i have an idea can help you with jquery support.

这是不可能的，如果是，那将是非常没有吸引力的。但我有一个想法可以帮助您提供 jquery 支持。

You can view the demo here: http://hangaumy.com/order/

您可以在此处查看演示：http: //hangaumy.com/order/

When you type, it will automatically add words in it (look like placeholder)

当您输入时，它会自动在其中添加单词（看起来像占位符）

回答by Kay

You could try doing something like this:

你可以尝试做这样的事情：

HTML:

HTML：

<div class="wrapper">
  <input type="text">
  <span class="placeholder">Placeholder</span>
</div>

CSS:

CSS：

.wrapper{
  position: relative;
}

input {
  font-size: 14px;
  height: 40px;
}

.placeholder {
  position: absolute;
  font-size:25px;
  pointer-events: none;
  left: 1px;
  top: 1px;
  transition: 0.1s ease all;
}

input:focus ~ .placeholder{
  top: 1px;
  font-size: 11px;
}

JSFiddle

JSFiddle

回答by Kyle Baker

This could be done by using the 'onchange' handler. You would write a fancy function that would concat the remainder of the placeholder onto what the user has typed, and would also place the cursor at the end of the user's text.

这可以通过使用“onchange”处理程序来完成。您将编写一个奇特的函数，将占位符的其余部分连接到用户输入的内容上，并将光标置于用户文本的末尾。

Here's some untested, incomplete js/psuedocode to give you an idea:

这里有一些未经测试的、不完整的 js/psuedocode 给你一个想法：

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 = 
  }
}

Something I haven't handled here is the cursor focusing. That will need an 'onfocus' event, and will use the userTextLength property as well to decide where to place it. For some help on doing that, this answerlooks like it should be helpful.

我在这里没有处理的是光标聚焦。这将需要一个 'onfocus' 事件，并且还将使用 userTextLength 属性来决定放置它的位置。对于这样做的一些帮助，这个答案看起来应该有帮助。