Faire un * seulement une partie * d'une zone de texte non modifiable

Question

Je souhaite qu'un utilisateur puisse personnaliser sa page d'URL personnelle sur mon site, où la valeur d'une zone de texte sera "example.com/username" mais Je veux que le « example.com/ » pour être dans la zone de texte mais non modifiable

Tumblr fait cela, mais je ne peux pas comprendre comment: http://www.tumblr.com/register

Answer 1

Ceci est le code en question sur la page Tumblr.

 <input type="text" class="text_field" style="padding:0px; border-width:0px; text-align:right; width:325px; background:transparent;" 
    id="tumblelog_name" name="tumblelog[name]" 
              onfocus="$('tumblelog_name_background').style.backgroundColor = '#f9f8e4'; $('tumblelog_name_background').style.color = ''" onblur="$('tumblelog_name_background').style.backgroundColor = ''; if($('tumblelog_name').value == '') 
{ $('tumblelog_name_background').style.color = '#c1cfdd' }"/>.tumblr.com 

Comme vous pouvez le voir le .tumblr.com supplémentaire ne fait pas partie de la zone de saisie de texte du tout. C'est un div qui est conçu pour ressembler à la boîte de saisie de texte à côté de lui. Donc en lui donnant l'illusion d'un champ de texte d'entrée non-imprimable.

Answer 2

vous pouvez tout résoudre avec css, est un entrée sur le côté d'un div qui contient la partie qui ne change pas avec le même regard.

html dans votre exemple:

<div style="position:absolute; right: 8px; top: 4px; white-space: nowrap;"> 
    <input type="text" 
      class="text_field" style="padding:0px; border-width:0px; text-align:right; width:325px; background:transparent;" 
      id="tumblelog_name" 
      name="tumblelog[name]"  
      onfocus="$('tumblelog_name_background').style.backgroundColor = '#f9f8e4'; $('tumblelog_name_background').style.color = ''" 
      onblur="$('tumblelog_name_background').style.backgroundColor = ''; if($('tumblelog_name').value == '') { $('tumblelog_name_background').style.color = '#c1cfdd' }">.tumblr.com 
</div> 

Answer 3

Vous le faites en cochant la valeur de votre onkeyup textbox. Dans votre gestionnaire d'événements, vous pouvez vous assurer que la zone de texte indique ce que vous voulez après que l'utilisateur a appuyé sur une touche. S'ils suppriment votre texte, vous le remettez juste après. Vous voudrez également vous assurer que votre gestionnaire est appelé onblur aussi bien.

Answer 4

il n'y a aucun moyen de le faire. Si vous regardez la source de tumblr.com vous pouvez voir que le ".tumblr.com" est en dehors de l'étiquette d'entrée. Son style simple et simple. Bordure droite de la boîte de saisie = rien. Et ajoutez le noeud de frère pour continuer le style.

<input type="text" class="text_field" style="padding:0px; border-width:0px; text-align:right; width:325px; background:transparent;" 
         id="tumblelog_name" name="tumblelog[name]" 
                onfocus="$('tumblelog_name_background').style.backgroundColor = '#f9f8e4'; $('tumblelog_name_background').style.color = ''" onblur="$('tumblelog_name_background').style.backgroundColor = ''; if($('tumblelog_name').value == '') 
`enter code here`{ $('tumblelog_name_background').style.color = '#c1cfdd' }" 
/>.tumblr.com 

Answer 5

Il existe en fait un moyen JavaScript de le faire sans un hack CSS désordonné. Voir le script sur cette page: http://aspdotnet-suresh.blogspot.com/2010/11/introduction-here-i-will-explain-how-to.html