Otra opción es no subir el elemento encima, simpmemente ponerlo al lado y sacarle los border, outlines, boxes y demás al input le pones solo borde a la derecha arriba y abajo al input y al contrario al span. Es probablemente la mejor solución. O no usar input y usar un span con contenteditable. Así no tienes que quitarle 20 historias.
Hay muchas formas, opta por la que te parezca más sencilla.
Me funciona pero... ¿Es lo más fácil? Muchas gracias por su tiempo..
Podrías explicarme de a paso esta parte del código?
/^http:\/\//
Es una expresión regular. Sirven para buscar en textos.
Ese código equivale a new RegExp("^http://");
El ^sirve para que busque el patrón al inicio.
El resto es el texto a buscar. En resumen, la exoredión chequea si existe http:// en el string.
El usa /texto/ porque es la forma literal de las expresiones regulares. De igual forma que haces "texto" en lugar de String(texto).
Después escapa las barras / con el caracter de escape \
Es lo mismo que "y el dijo:\" este es mi texto\" en un alarde de elocuencia" sirve para poder usar comillas dentro de comillas o barras dentro de barras.
https://eloquentjavascript.net/09_regexp.htmlSi quieres también aceptar el https usa /^https?:\/\//