deshabilitar solo el text del objeto file

diegofff · #1 (**permalink**) 15/05/2003, 15:53

Mire las 20 páginas del foro y no encontre la respuesta a lo que busco:

Quiero que en un objeto file, que consta de una caja de texto y un botón para subir archivos al servidor, se deshabilite la opción de escritura sobre la caja de texto y quede habilitada la opción de pulsar el botón para activar el proceso de subir el archivo.

He indagado con las opciones y solo encuentro que existe una propiedad de deshabilitación pero de todo el objeto file lo que me deshabilita ambas cosas, el text y el botón y no hace absolutamente nada.

Ojalá alguien me pueda ayudar con este problema.

Muchas gracias de antemano.

tunait · #2 (**permalink**) 16/05/2003, 04:24

Hola diegofff,

pues yo diría que no se puede. Las veces que he indagado buscando info para manipular ese tipo de campos siempre han sido con el resultado de que apenas se puede manipular y nunca encontré la forma de aislar la caja de texto del botón.

No tomes mi opinión como definitiva de todas formas, a ver si alguien más aporta alguna solución alternativa.

saludos

KarlanKas · #3 (**permalink**) 16/05/2003, 04:42

Hola a los dos!! (Don Diego y Tututututututunaiiit!)

En Gamínedes hacemos uso de un pequeño truco. consiste en hacer parecer que se usa un input-file pero no se usa un input-file... o al menos no sólo uno...

Es un truco que no sé si os gustará a los terricolas. Consiste en ocultar el input file y en su lugar poner un input text de solo lectura que contenga el nombre del archivo. Con esto conseguimos mantener el input file como input file pero sin que puedan modificarlo. Un ejemplo:

Código:

<form action="javascript:alert('enviando')">
<div id="todoElFile">
<input style="width:0px;position:absolute;top:20px;left:136px;"
		type="file"
       name="pepote"
       id="pepote"
        onchange="document.forms[0].elements[1].value=this.value">
<input type="Text" readonly style="width:140px;position:absolute;left:0px;top:20px">
</div>
</form>

Dime si te va!!

La verdad es que de JS tiene un poquiiiiiito.... no sé si deberíamos trasladarlo a CSS...

tunait · #4 (**permalink**) 16/05/2003, 04:58

Oye, buen truco!!, no se me había ocurrido darle un width de 0 al campo.

Pero parece que no acepta el evento onchange para pasar el valor al de tipo file (en explorer 5.0)

¿alguna alternativa, KarlanKas??

KarlanKas · #5 (**permalink**) 16/05/2003, 05:05

Vaya! En el 6.0 de Gamínedes sí lo admite... mmmm... vamos a mirar algo...

------------------- UNOS MINUTOS MÁS TARDE... -----------------------------
Creo que lo tengo, a ver si va!

Código:

<form action="javascript:alert('enviando')">
<div id="todoElFile">
<input style="width:0px;position:absolute;top:20px;left:136px;"
		type="file"
       name="pepote"
       id="pepote"
	    onmouseout="document.forms[0].elements[1].value=this.value"
        >
<input type="Text" readonly style="width:140px;position:absolute;left:0px;top:20px">
</div>

</form>

tunait · #6 (**permalink**) 16/05/2003, 05:18

Me imaginaba que sería una cuestión de versión.

Bueno, digamos que ahora se llega a ver el valor del campo solo que hay que pasarle por encima dos veces.

Es decir, pincho, escojo un archivo y no se ve nada. Pero entonces paso de nuevo el ratón sobre el botón y entonces sí aparece.

Este campo file es *odido eh?

KarlanKas · #7 (**permalink**) 16/05/2003, 05:32

grrrrrr... Me da la impresión, querida tunait, de que tú eres la única persona sobre la faz del mundo uqe sigue con IE 5.0... pero seguiré hasta la muete!!

-------------------UN TIEMPECITO DESPUÉS---------------------

Matando moscas a cañonazos!

Código:

<html>
<head>
	<title>Untitled</title>
</head>

<body onload='setInterval("if(document.forms[0].elements[0].value){document.forms[0].elements[1].value=document.forms[0].elements[0].value}",50)'>
<form action="javascript:alert('enviando')">
<div id="todoElFile">
<input style="width:0px;position:absolute;top:20px;left:136px;"
		type="file"
       name="pepote"
       id="pepote"
	   
        >
<input type="Text" readonly style="width:140px;position:absolute;left:0px;top:20px">
</div>

</form>


</body>
</html>

tunait · #8 (**permalink**) 16/05/2003, 05:33

Cita:

Me da la impresión, querida tunait, de que tú eres la única persona sobre la faz del mundo uqe sigue con IE 5.0

KarlanKas · #9 (**permalink**) 16/05/2003, 05:34

No te pongas así!! es la expresión de mi impotencia!! no lo decía en serio... todo el mundo que prefiere guardar recursos de su ordenador seguro que usa la 5.0!!

tunait · #10 (**permalink**) 16/05/2003, 05:37

------------------- También yo otro rato después -------------------

jeje pues sí, a cañonazos, pero al menos se asegura que se entere el campo de una vez

Buen truco

pa una vez que pongo el separador de mensajes unidos.....

Es que cuando suba de versión dejaré de enterarme de lo que no funciona en el 5.0.

Así si logro que las cosas anden en mi explorer, funcionará en las versiones posteriores.

KarlanKas · #11 (**permalink**) 16/05/2003, 05:39

Te acuerdas de cuando el IE5.0 permitía mantener la versión 4.0 del IE? que tiempos!! No sé porqué no lo hacen ahora!

diegofff · #12 (**permalink**) 16/05/2003, 08:26

Gracias por interesarse en mi pregunta y por compartir mi inquietud, voy a considerar sus sugerencias.

La verdad tome la decision de poner una capa en blanco cubriendo el área que ocupa el cuadro de texto, así de esta forma no es posible la escritura sobre el text y queda habilitado el uso del botón.

muchas gracias...

ese problema que comentan lo solucione cambiando el evento por onfocus y listo el pollo:

---------------------------------------------------------------
<form action="javascript:alert('enviando')">
<div id="todoElFile">
<input style="width:0px;position:absolute;top:20px;left:1 36px;"
type="file"
name="pepote"
id="pepote"
onfocus="document.forms[0].elements[1].value=this.value"
>
<input type="Text" readonly style="width:140px;position:absolute;left:0px;top: 20px">
</div>
</form>
-------------------------------------------------------------------------

KarlanKas · #13 (**permalink**) 16/05/2003, 09:07

No sé, diegofff.... pero a mi tu código no me va. Lo que hice en un primer momento fue lo que dices tú de la capa, pero fallaba en mi PC. Así que pen´se en lo segundo...

Pero si te va bien a tí... perfecto!

diegofff · #14 (**permalink**) 16/05/2003, 09:08

Lo de la capa lo hice con dreamweaver.

KarlanKas · #15 (**permalink**) 16/05/2003, 09:15

¿Ves? Ahí me ganais... me pongo muy nervioso con el Dreamweaver! prefiero el Homesite!

caxpper · #16 (**permalink**) 26/12/2007, 18:16

Hola he estado leyendo este tema y creo que es lo que necesito, pero me faltan algunas cosas:

en <div id="todoElFile"> no poneis como es el estilo "todoElFile" por lo que no me sale nada en el formulario ningun campo. Me gustaria que alguien pudiera poner los atributos de este estilo.

Por otro lado cuando poneis "document.forms[0].elements[1].value=this.value" de donde sale "document.forms[0].elements[1].value" estoy un poco perdido con esto.

Si pudierais poner un ejemplo completo os lo agrdeceria mucho.

Salu2.

KarlanKas · #17 (**permalink**) 27/12/2007, 02:08

Es la forma que tiene javascript de tratar los formularios. Lo hace por arrays, donde el primer elemento no es el elemento uno sino el cero.

Entonces "document.forms[0].elements[1].value=this.value" quiere decir que el valor (value) del segundo elemento (elements[1]) del primer formulario (forms[0] del documento (document) sea el valor del input file.

Y fíjate en esta línea:
<input style="width:0px;position:absolute;top:20px;left:1 36px;"
hay un espacio entre el 1 y el 3, deberías quitarlo

Déjalo así:

<input style = "width:0px; position:absolute; top:20px; left:136px;"

Espero que te sirva!

caxpper · #18 (**permalink**) 27/12/2007, 08:45

Nada no me sale ningun campo, este es mi codigo:

<td align="left"><span class="style15">Envianos tu curriculum vitae<br>

<input style = "width:0px; position:absolute; top:20px; left:136px;" type="file" name="fichero" id="fichero" onfocus = "document.forms[0].elements[7].value=this.value" />

<input type="Text" readonly style="width:140px; position:absolute; left:0px; top:20px" />

</span></td>

Yo creo que tendra que ver con lo del estilo
"todoElFile" que vosotros utilizais en esta linea <div id="todoElFile">

Sino no lo entiendo.

caxpper · #19 (**permalink**) 27/12/2007, 08:55

Vale nada no hagas caso al anterior mensaje ya me sale.

Gracias