[HTML] Permitir borrar hasta cierto punto en un input text o por el estilo

.:Xx4NG3LxX:. · 19 Septiembre 2020, 23:13 PM

Saludos,

<input type="url" id="url" class="i" value="http://" />

... Daría como resultado un campo de texto con "http://" como valor por defecto.
Lo que quisiera lograr, es que ese mismo texto no se pueda borrar. O sea, que el usuario escriba "hola.com", y dentro del input quede "http://hola.com"... Luego decide borrar todo pero que no pueda borrar "http://" (por ejemplo)...

Espero haberme explicado bien...

Gracias de antemano...

.:Xx4NG3LxX:. · 22 Septiembre 2020, 00:46 AM

@XSStringManolo · 22 Septiembre 2020, 01:01 AM

Cita de: .:Xx4NG3LxX:. en 19 Septiembre 2020, 23:13 PM
Saludos,

Código (html) [Seleccionar] Expandir
<input type="url" id="url" class="i" value="http://" />

... Daría como resultado un campo de texto con "http://" como valor por defecto.
Lo que quisiera lograr, es que ese mismo texto no se pueda borrar. O sea, que el usuario escriba "hola.com", y dentro del input quede "http://hola.com"... Luego decide borrar todo pero que no pueda borrar "http://" (por ejemplo)...

Espero haberme explicado bien...

Gracias de antemano...

Yo usaría otro elemento a la izquierda.
<span>http://</span><input type="text" ...

Cuando se vaya a mandar el form compruebo el value del input y le añado el http.

Le metes padding al input y colocas el span encima del campo de texto del input con css.

Ejemplo básico:

Código (html4strict) [Seleccionar]

<html>
<head>
<meta charset="utf-8">
  <style>
  #httpInput {
    padding: 0 0 0 47px;
    font-size: 1em;
    width: 170px;
  }
  
  #httpSpan {
    position: fixed;
    left: 10px;
    font-size: 1em;
  }
  </style>
</head>
<body>

<div id="httpContainer">
<span id="httpSpan">http://</span>
<input id="httpInput" type="text" placeholder="example.com">
<button id="httpSend" type="button">Send!</button>
</div>

<script>
document.querySelector("#httpSend").addEventListener("click", function(httpInput) {
  httpInput = document.querySelector("#httpInput").value;
  peticionGET("http://" + httpInput, function(resp) {
    alert(resp);
  });
});


function peticionGET(url, callback) {
  var peticion = new XMLHttpRequest();
  peticion.open("GET", url , true);
  peticion.send();
  peticion.onreadystatechange = function() {
    if (peticion.readyState == 4) {
      if (peticion.status == 0 || peticion.status == 200) {
        callback(peticion.responseText);
      }
    }
  }      
}
</script>
</body>
</html>

.:Xx4NG3LxX:. · 22 Septiembre 2020, 03:47 AM

Si, de hecho ya yo había pensado en eso, pero pensé que sería una especie de la mala práctica poner el span encima del input... No sé si sea lo que busco... De igual manera gracias por tu tiempo, si no hallo alguna solución implementare la que me has proporcionado...

EdePC · 22 Septiembre 2020, 03:57 AM

Cita de: .:Xx4NG3LxX:. en 22 Septiembre 2020, 03:47 AM
Si, de hecho ya yo había pensado en eso, pero pensé que sería una especie de la mala práctica poner el span encima del input... No sé si sea lo que busco... De igual manera gracias por tu tiempo, si no hallo alguna solución implementare la que me has proporcionado...

Otra opción es comprobar el value y tomar decisiones, por ejemplo si ya tiene el http:// solo le agregas el nuevo texto introducido, si borran el http:// o parte de él pues lo vuelves a poner XD.

- En mi caso he utilizado un Expresión Regular para decir que siempre empiece con http://

Código (javascript) [Seleccionar]

<input type="text" value="http://" oninput="comprueba(this)">

<script>
  function comprueba(e) {
    if ( e.value.length < 7 ) {
      e.value = 'http://'
    } else if ( !e.value.match(/^http:\/\//) ) {
      e.value = 'http://' + e.value
    }
  }
</script>

.:Xx4NG3LxX:. · 22 Septiembre 2020, 04:41 AM

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?

Código (javascript) [Seleccionar]

/^http:\/\//

@XSStringManolo · 22 Septiembre 2020, 06:34 AM

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.

Cita de: .:Xx4NG3LxX:. en 22 Septiembre 2020, 04:41 AM
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?

Código (javascript) [Seleccionar] Expandir
/^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.html

Si quieres también aceptar el https usa /^https?:\/\//

.:Xx4NG3LxX:. · 22 Septiembre 2020, 07:09 AM

Vale, muchísimas gracias por la explicación, se te agradece... Igual a EdePC...

Xyzed · 24 Septiembre 2020, 20:58 PM

Hay varias funciones que realizan lo que vos necesitas actualmente, podes investigar y encontrarás más de una alternativa.
Desde mi punto de vista lo más fácil que podes hacer (y no queda tan mal) es lo siguiente:

Código [Seleccionar]

<input type="text" value="http://" disbaled><input type="text" name="direccion">

Este código indicado arriba mostrará dos cajas de texto, una bloqueada (gracias al disabled, el cual no podrá ser alterado) y otra donde el usuario podría ingresar el texto/dirección que deseas.
Luego desde tu parte tendrías que recibir la cadena completa (agregando un nombre al valor que se encuentra en disabled, o simplemente crear un nuevo identificador con el valor "http/s://" según necesites) concatenando las cadenas.