Html Mettre un texte fixe sur l'entrée de texte

Comment puis-je mettre un texte par défaut dans une entrée de l'élément html dont l'utilisateur ne peut pas supprimer(ficed texte sur le début de l'entrée ) .
La deuxième chose que je veux que le curseur sera indexedafter ce texte fixe.

Vous aurez besoin de javascript pour faire cela. Pourquoi voulez-vous faire cela? Pourquoi ne pas ajouter une étiquette en face de l'entrée ou de la? Je pense que cette approche permettra d'induire les utilisateurs en erreur.
Que diriez -placeholder?
les espaces réservés sont supprimés lorsque concentré et le texte saisi.
Le texte dans la zone de saisie? Si non, cochez la case "Ajouté et ajouté les entrées de la section" dans le Bootstrap les Formes de la documentation (twitter.github.io/bootstrap/base-css.html#formulaires). Vous pouvez ajouter / ajouter du texte à une zone de saisie
me bat, normalement je trouve qu'il ne confond l'utilisateur si le champ d'entrée n'est pas effacé.

OriginalL'auteur Brahim | 2013-04-26

  1. 22

    essayer celui-ci pourrait être utile pour vous.

    http://jsfiddle.net/pZLcg/ 

    <div class="input-box">
  <input value="" autofocus="autofocus"/>
  <span class="unit">£</span>
</div>

    OriginalL'auteur Manish Sharma

  2. 5

    Je sais que cette question est déjà répondu, mais ici, c'est une autre façon de faire.

    <!DOCTYPE html>
<html>
<head>
    <style>
    #text_container
    {
        padding: 1px;           /*To make sure that the input and the label will not overlap the border, If you remove this line it will not display correctly on Opera 15.0*/
        border: 1px solid activeborder; /*Create our fake border :D*/
    }
    #text_container > label
    {
        color: activeborder;
        background-color: white;    

        -webkit-touch-callout: none;    /*Make the label text unselectable*/
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
    #text_container > input
    {
        border: none;           /*We have our fake border already :D*/
    }
    </style>
</head>

<body>
    <span id="text_container">
    <!-- Don't break the following line to avoid any gaps between the label text and the input text -->
    <label>http://www.</label><input type="text" />
    </span>
</body>
</html>

    J'ai testé ce code avec..

    Firefox 22
Google Chrome 28
Internet Explorer 10
Safari 5
Opera 15

    OriginalL'auteur Helmyano

  3. 4

    Si vous souhaitez corriger cela avec seulement un élément de saisie vous pouvez utiliser une ligne svg arrière-plan.

    http://codepen.io/anon/pen/pJoBya

    HTML

    <input type="text" />

    CSS

    input {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="30"><text x="5" y="19" style="font: bold 16px Arial;">Age:</text></svg>') no-repeat;
  border: 1px solid #555;
  box-sizing: border-box;
  font: 16px "Arial";
  height: 30px;
  padding-left: 50px;
  width: 300px;
}

    Pour faire ce travail dans Internet Explorer vous devez encodeURIComponent l'image SVG
    http://pressbin.com/tools/urlencode_urldecode/

    Vraiment un super solution. Au moins dans Chrome, même la taille du texte se développe lorsque l'utilisateur zoome.

    OriginalL'auteur Ben Besuijen

  4. 1

    Absolument positionner le texte sur le début du champ, puis ajouter un padding à gauche de la zone jusqu'à ce que le curseur lignes jusqu'à la bonne position. Voir exemple ici:
    http://www.accessfinancialservices.co.uk/calculators/mortgage-calculator/

    OUI, LE Texte doit être dans l'entrée, la première partie du texte dans fixxed mais l'utilisateur peut ajouter un peu de texte, juste après le Texte fixe .
    le faire dans le backend? ou de le faire avec js une fois que le formulaire est soumis.

    OriginalL'auteur matpol

  5. 0
    var requiredText = 'http://';
    $('#site').on('input',function() {
        if (String($(this).val()).indexOf(requiredText) == -1) {
            $(this).val(requiredText);
        }
    });

    OriginalL'auteur Eduardo de Souza

  6. -5

    suffit d'utiliser placeholder="Nom"
    par exemple:

    L'espace réservé à l'attribut n'est pas fixe, lorsque vous tapez, il remplace l'espace réservé à votre tapé dans le texte

    OriginalL'auteur name