HTML - Conserver un espace réservé lorsque les types d'utilisateur

J'ai une entrée comme ceci:

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

Quand je tape quelque chose dans l'entrée, le texte de l'espace réservé à disparaître, c'est tout à fait évident.

Maintenant, ce que je veux faire, c'est que je veux que le texte de l'espace réservé à rester lorsque l'utilisateur types de sorte que vous pouvez voir l'espace réservé de texte comme un texte d'arrière-plan derrière le texte original:

HTML - Conserver un espace réservé lorsque les types d'utilisateur

EDIT: je veux aussi être capable de changer l'arrière-plan de texte à l'aide de JavaScript.

source d'informationauteur super

  1. 10

    Difficile de penser à un bon cas d'utilisation pour un tel comportement, comme c'est le blocage de certains des utilisateurs d'entrée.

    Un moyen facile serait d'utiliser input::after mais ce n'est pas pris en charge par n'importe quel navigateur en ce moment (merci @JukkaK.Korpela).

    Mais vous pouvez utiliser un wrapper élément et un attribut de données, comme suit:

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

    Avec ce css:

    .placeholder
{
    position: relative;
}

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

    : HTML - Conserver un espace réservé lorsque les types d'utilisateur

    Cliquez ici pour jsFiddle démo.

    Puisque vous aurez à faire beaucoup de réglages à faire cela à l'air bon, vous pouvez également envisager l'utilisation de l'emballage <div> de l'élément d'entrée "look alike":

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

    Cliquez ici pour la Démo 3. (avec moqué de <input />)

    Cliquez ici pour la Démo 2. (avec contenteditable)

  2. 0

    Cela pourrait être fait en utilisant le 'onchange' handler. Vous devez écrire une fantaisie fonction concat le reste de l'espace réservé sur ce que l'utilisateur a tapé, et serait également placer le curseur à la fin de l'utilisateur du texte.

    Voici quelques mises à l'épreuve incomplète js/psuedocode pour vous donner une idée:

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

    Quelque chose que je n'ai pas traité ici, c'est le curseur de mise au point. Qui aura besoin d'un "onfocus" événement, et d'utiliser la userTextLength propriété ainsi de décider où placer. Pour obtenir de l'aide sur le fait que, cette réponse dirait qu'il devrait être utile.

  3. 0

    il est impossible, si elle l'est, il sera très attrayant. Mais j'ai une idée qui peut vous aider avec prise en charge jquery.

    Vous pouvez voir la démo ici: http://hangaumy.com/order/

    Lorsque vous tapez, il va automatiquement ajouter des mots (ressemble à de l'espace réservé)