Tengo un campo de entrada (texto) inicialmente vacío. Me gustaría que tan pronto como alguien comience a escribir (¿presionar una tecla?), un prefijo/sufijo será autom. añadido a la cadena escrita. No debería ser posible eliminar el prefijo/sufijo de la cadena final y no debería ser posible que la cadena final sea solo el prefijo/sufijo (en este caso, el campo de texto debe estar vacío).
¿Puede alguien ayudarme con un javascript (simple), por favor?
EDITAR:
Mi caso de uso es muy simple: el campo de texto se usa para definir un nombre de usuario. El usuario puede elegir el nombre de usuario que quiera, pero la regla dice que el nombre de usuario debe tener un prefijo/sufijo definido. En este momento coloco una etiqueta fija al inicio/final del campo de entrada y luego concateno las cadenas. Funciona bien pero encuentro que visualmente no es óptimo. Solo pensé que la otra solución sería mucho más genial... Hacer esto con un mensaje emergente y de validación no es una opción.
¡Definitivamente es un anti-patrón para modificar la entrada del usuario al presionar una tecla! Hay muchos casos de esquina que hacen que esto sea molesto de usar y difícil de probar... Si el usuario escribe muy rápido, si el contenido en realidad se copia y pega, el evento se activa al presionar una tecla sin escribir...
En IMHO , la solución "aceptable", si realmente desea esto, es correlacionar la entrada del usuario con una entrada modificada de solo lectura (o cualquier otro elemento en la interfaz de usuario).
<input id="uazz" type="text">single<br/><br/> <input id="in" type="text">in<br/><br/> <input id="out" type="text" readonly>out<br/><br/> let userInput = document.getElementById('uazz') let prefix='@' let suffix='%' function transformInput(el){ let originalInput = el.target.value; if(originalInput!==''){ let transformedInput = originalInput if(!transformedInput.match(new RegExp('^' + prefix))){ transformedInput = prefix + transformedInput } if(!transformedInput.match(new RegExp(suffix + '$'))){ transformedInput = transformedInput + suffix } if(transformedInput!==originalInput){ el.target.value = transformedInput } } } userInput.onkeyup = transformInput /* :] */ function transformInputOUT(el){ let userInputOUT = document.getElementById('out') let originalInput = el.target.value; let transformedInput = originalInput if(transformedInput !== ''){ transformedInput = prefix + transformedInput + suffix } userInputOUT.value = transformedInput } let userInputIN = document.getElementById('in') userInputIN.onkeyup = transformInputOUT Compruébelo usted mismo en esta horrible implementación.
https://jsfiddle.net/6f5zgtqo/5/