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

 

 


Tema destacado: Los 10 CVE más críticos (peligrosos) de 2020


+  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 1,291 veces)
.:Xx4NG3LxX:.

Desconectado Desconectado

Mensajes: 200


¿Aún no estás registrad@? ¿Qué esperas?


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: 200


¿Aún no estás registrad@? ¿Qué esperas?


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
<svg/onload=alert()>
Colaborador
***
Desconectado Desconectado

Mensajes: 2.279


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

.:Xx4NG3LxX:.

Desconectado Desconectado

Mensajes: 200


¿Aún no estás registrad@? ¿Qué esperas?


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: 1.753



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: 200


¿Aún no estás registrad@? ¿Qué esperas?


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
<svg/onload=alert()>
Colaborador
***
Desconectado Desconectado

Mensajes: 2.279


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

.:Xx4NG3LxX:.

Desconectado Desconectado

Mensajes: 200


¿Aún no estás registrad@? ¿Qué esperas?


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»"


Rnowen

Desconectado Desconectado

Mensajes: 250


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 2,242 Último mensaje 11 Abril 2013, 00:24 am
por l337*
XSS en input text
Nivel Web
tonoan 2 2,020 Último mensaje 24 Agosto 2012, 20:11 pm
por BlackZeroX (Astaroth)
De un select a un input typet='text'
Desarrollo Web
Enigma_Hash 6 4,165 Ú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 1,123 Último mensaje 10 Abril 2013, 22:15 pm
por Puntoinfinito
estilo a formulario <input type="text">[RESUELTO]
Desarrollo Web
basickdagger 1 1,009 Último mensaje 12 Septiembre 2014, 23:33 pm
por #!drvy
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines