Mettre non modifiable, un texte statique à l'intérieur d'un input[type=text] (captures d'écran)

Je suis le développement d'une application où les utilisateurs peuvent choisir l'URL de son profil, ala facebook.com/name. Tout allait bien, sauf que je vais avoir des questions de style de l'ajout d'un ensemble statique de texte à l'intérieur d'une entrée, d'aider à transmettre le message d'avoir votre propre URL.

Voici ce que je veux, d'entrée de ressembler lorsque l'utilisateur visite la page:
Mettre non modifiable, un texte statique à l'intérieur d'un input[type=text] (captures d'écran)

Et voici ce que je veux ressembler quand ils ajoutent leur propre entrée:
Mettre non modifiable, un texte statique à l'intérieur d'un input[type=text] (captures d'écran)

La moitié de ce problème est facile, je peux juste régler un grand à gauche-rembourrage à l'entrée, il arrive à afficher des effets de survol, indépendamment de la position du curseur et de la place de l'entrée en conséquence. Mais la question est de mettre le texte dans la ligne de saisie sans rupture de style autour d'elle (et de prévenir l'utilisateur d'être en mesure de sélectionner le texte statique, de sorte que même en cliquant sur le texte statique sera "focus", le champ de saisie).

J'aimerais vraiment préfèrent utiliser pur HTML/CSS, mais pourrait utiliser Javascript si c'est un must.

Voici où j'en suis maintenant, le but est d'apporter de l' "www.website.com" le texte dans le champ de saisie sans briser le style de la textarea à suivre: http://jsfiddle.net/rUkS8/1/

Merci et désolé pour cette longue description!

Définir un div-élément pour obtenir votre visible border. Faire de l'url de base statique sous forme de texte dans un de la durée de l'élément. Ajouter un composant textinput à droite et désactiver tous les style pour l'entrée-champ.
Pas sûr que c'est un bon motif de l'INTERFACE utilisateur. Les utilisateurs pourront naturellement s'attendre à ce que quelque chose dans l'entrée est modifiable. Semblables que j'ai vu montrer le "plein" de la chaîne adjacente à l'entrée et à la mettre à jour dynamiquement en fonction du contenu enregistré.

OriginalL'auteur Walker | 2011-10-23

  1. 2

    Pourquoi ne pas contourner le problème, et n'ont que du texte statique à l'extérieur de l'entrée?

    www.website.com/<input type="text" name="url" />

    Ce dégrade bien plus/en état de mort cérébrale navigateurs, fonctionne lorsque javascript est désactivé, et le fait évident où le séparer des intrants.

    C'était ma première idée, trop. J'ai recommandé d'utiliser un div avec une bordure et une entrée sans style pour réaliser le style voulu, trop.
    J'ai essayé cela, a obtenu certains flack du reste de l'équipe UX qui n'ont pas aimé la façon dont il a brisé le style/flux de la page
    Puis il suffit de piège "changement" des événements (flou, keyup, etc...) et de vérifier à chaque fois si le texte est présent. Si elle ne l'est pas, puis l'ajouter dans. Ce qui est encore PIRE, la conception, mais si les regards trump usage normal, alors vous êtes coincé avec obéissant aux regards des gens, sur le coût de la vie en enfer sur les utilisateurs.
    Bon je suis passé à plus de configuration standard, le champ de saisie avec une chaîne de mise à jour sur keyup montrant la chaîne finale. J'espère que c'est intuitif!
    vous pouvez mettre la solution proposée dans les commentaires, comme une option dans votre réponse.

    OriginalL'auteur Marc B

  2. 0

    Si vous utilisez une étiquette et la for attribut, de traiter les événements de clic pour vous:

    <div style="border:1px solid #000;">
    <label for="textinput" style="cursor:text;">asdf</label>
    <input type="text" id="textinput">
</div>

    Si vous cliquez sur l'étiquette, il va envoyer le focus à l'entrée. Mettre cursor:text; ajoute à l'effet. Tout ce que vous avez à faire est de jouer à des jeux avec de la taille et de la frontière, et vous êtes tous ensemble.

    OriginalL'auteur Landon