Quiero crear una plantilla dentro del cuadro de entrada: cuando hago clic en la entrada, se seleccionará automáticamente la palabra "suNombre" y (tal vez) al presionar la pestaña cambiará a la palabra "suCorreo Electrónico". Básicamente quiero que el usuario pueda modificar SÓLO "tuNombre" y "tuEmail", el resto debe quedar así, ¿cómo hago?
input { width: 200px; height: 20px; } <input type="text" value="<yourName>(yourEmail)">Puede usar dos entradas y falsificar el borde como se muestra a continuación. El aspecto no es realmente agradable, pero puedes aplicarle tus propios estilos.
div { border: 1px solid grey; border-radius: 2px; width: max-content; } div:hover { border-color: dimgrey; } div input { display: inline; min-width: 7rem; width: max-content; /* you could add the following line, if you want no outlining on focus */ /* outline: none;*/ border: none; } <div> <span><</span> <input type="text" placeholder="yourname"> <span>></span> <span>(</span> <input type="email" placeholder="yourEmail"> <span>)</span> </div>