elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Usando Git para manipular el directorio de trabajo, el índice y commits (segunda parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [HTML] Permitir borrar hasta cierto punto en un input text o por el estilo
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [HTML] Permitir borrar hasta cierto punto en un input text o por el estilo  (Leído 4,294 veces)
.:Xx4NG3LxX:.

Desconectado Desconectado

Mensajes: 202



Ver Perfil WWW
[HTML] Permitir borrar hasta cierto punto en un input text o por el estilo
« en: 19 Septiembre 2020, 23:13 pm »

Saludos,

Código
  1. <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...


En línea

"Quizá Batch no sea un lenguaje de programación, pero no obstante deja de ser útil. Asi que no anden diciendo «Que ganas de perder el tiempo»"
.:Xx4NG3LxX:.

Desconectado Desconectado

Mensajes: 202



Ver Perfil WWW
Re: [HTML] Permitir borrar hasta cierto punto en un input text o por el estilo
« Respuesta #1 en: 22 Septiembre 2020, 00:46 am »

Up


En línea

"Quizá Batch no sea un lenguaje de programación, pero no obstante deja de ser útil. Asi que no anden diciendo «Que ganas de perder el tiempo»"
@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.397


Turn off the red ligth


Ver Perfil WWW
Re: [HTML] Permitir borrar hasta cierto punto en un input text o por el estilo
« Respuesta #2 en: 22 Septiembre 2020, 01:01 am »

Saludos,

Código
  1. <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
  1. <meta charset="utf-8">
  2.  <style>
  3.  #httpInput {
  4.    padding: 0 0 0 47px;
  5.    font-size: 1em;
  6.    width: 170px;
  7.  }
  8.  
  9.  #httpSpan {
  10.    position: fixed;
  11.    left: 10px;
  12.    font-size: 1em;
  13.  }
  14.  </style>
  15. </head>
  16.  
  17. <div id="httpContainer">
  18. <span id="httpSpan">http://</span>
  19. <input id="httpInput" type="text" placeholder="example.com">
  20. <button id="httpSend" type="button">Send!</button>
  21. </div>
  22.  
  23. document.querySelector("#httpSend").addEventListener("click", function(httpInput) {
  24.  httpInput = document.querySelector("#httpInput").value;
  25.  peticionGET("http://" + httpInput, function(resp) {
  26.    alert(resp);
  27.  });
  28. });
  29.  
  30.  
  31. function peticionGET(url, callback) {
  32.  var peticion = new XMLHttpRequest();
  33.  peticion.open("GET", url , true);
  34.  peticion.send();
  35.  peticion.onreadystatechange = function() {
  36.    if (peticion.readyState == 4) {
  37.      if (peticion.status == 0 || peticion.status == 200) {
  38.        callback(peticion.responseText);
  39.      }
  40.    }
  41.  }      
  42. }
  43. </body>
  44. </html>
« Última modificación: 22 Septiembre 2020, 01:40 am por @XSStringManolo » En línea

Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖

.:Xx4NG3LxX:.

Desconectado Desconectado

Mensajes: 202



Ver Perfil WWW
Re: [HTML] Permitir borrar hasta cierto punto en un input text o por el estilo
« Respuesta #3 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...
En línea

"Quizá Batch no sea un lenguaje de programación, pero no obstante deja de ser útil. Asi que no anden diciendo «Que ganas de perder el tiempo»"
EdePC
Moderador Global
***
Desconectado Desconectado

Mensajes: 2.042



Ver Perfil
Re: [HTML] Permitir borrar hasta cierto punto en un input text o por el estilo
« Respuesta #4 en: 22 Septiembre 2020, 03:57 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
  1. <input type="text" value="http://" oninput="comprueba(this)">
  2.  
  3. <script>
  4.  function comprueba(e) {
  5.    if ( e.value.length < 7 ) {
  6.      e.value = 'http://'
  7.    } else if ( !e.value.match(/^http:\/\//) ) {
  8.      e.value = 'http://' + e.value
  9.    }
  10.  }
  11. </script>
En línea

.:Xx4NG3LxX:.

Desconectado Desconectado

Mensajes: 202



Ver Perfil WWW
Re: [HTML] Permitir borrar hasta cierto punto en un input text o por el estilo
« Respuesta #5 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
  1. /^http:\/\//
« Última modificación: 22 Septiembre 2020, 04:43 am por .:Xx4NG3LxX:. » En línea

"Quizá Batch no sea un lenguaje de programación, pero no obstante deja de ser útil. Asi que no anden diciendo «Que ganas de perder el tiempo»"
@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.397


Turn off the red ligth


Ver Perfil WWW
Re: [HTML] Permitir borrar hasta cierto punto en un input text o por el estilo
« Respuesta #6 en: 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.

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
  1. /^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?:\/\//
« Última modificación: 22 Septiembre 2020, 06:38 am por @XSStringManolo » En línea

Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖

.:Xx4NG3LxX:.

Desconectado Desconectado

Mensajes: 202



Ver Perfil WWW
Re: [HTML] Permitir borrar hasta cierto punto en un input text o por el estilo
« Respuesta #7 en: 22 Septiembre 2020, 07:09 am »

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

"Quizá Batch no sea un lenguaje de programación, pero no obstante deja de ser útil. Asi que no anden diciendo «Que ganas de perder el tiempo»"
Xyzed


Desconectado Desconectado

Mensajes: 306



Ver Perfil
Re: [HTML] Permitir borrar hasta cierto punto en un input text o por el estilo
« Respuesta #8 en: 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:
<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.
En línea

...
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Input TEXT cambiando de color al click?
Desarrollo Web
MinusFour 4 3,238 Último mensaje 11 Abril 2013, 00:24 am
por l337*
XSS en input text
Nivel Web
tonoan 2 2,777 Último mensaje 24 Agosto 2012, 20:11 pm
por BlackZeroX
De un select a un input typet='text'
Desarrollo Web
Enigma_Hash 6 5,179 Último mensaje 12 Abril 2013, 07:45 am
por Enigma_Hash
De un select a un input typet='text'
Programación General
Enigma_Hash 1 2,022 Último mensaje 10 Abril 2013, 22:15 pm
por Puntoinfinito
estilo a formulario <input type="text">[RESUELTO]
Desarrollo Web
basickdagger 1 1,880 Último mensaje 12 Septiembre 2014, 23:33 pm
por #!drvy
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines