Cómo desactivar la casilla de texto de entrada de archivo en el IE?

StackOverflow https://stackoverflow.com/questions/591710

Pregunta

¿Es posible para evitar que el usuario escriba en un cuadro de texto de entrada de archivo en el IE? La razón que pido es que si un usuario introduce texto que no se ve como una ruta del sistema de archivos (por ejemplo, no se inicia con algo como c:. ...). Luego, cuando el usuario hace clic en el botón de envío no pasará nada

Me gustaría ya sea para no permitir que el usuario escriba en la caja o tener la forma presente de forma normal.

He encontrado que la misma pregunta se hizo aquí sin respuesta: http://www.webmasterworld.com/html/3290988.htm

Y esta persona se le ocurrió un truco que puedo usar si no hay otra respuesta adecuada: http://www.shauninman.com/archive/2007/09/10/ styling_file_inputs_with_css_and_the_dom

EDIT: Para aclarar - si el usuario escribe "no es una ruta de archivo" en el cuadro de texto al lado del botón "Examinar" y hace clic en Enviar, en IE no pasará nada. La forma no se someterá -. IE no permitir que un formulario para ser presentado cuando un caja no tiene una ruta de archivo real

¿Fue útil?

Solución 3

He resuelto esto con otra forma mediante un botón en lugar de un presente y el uso de JavaScript para comprobar el valor antes de la presentación. 

<input type="file" name="inputFile">
<input type="button" onclick="if(fileHasValidPath()) { submitForm(); }" value="Submit">

function fileHasValidPath() {
  if (isIE()) {
    var inputFile = document.forms[0].inputFile;
    if (inputFile.value != "" && /^(\w:)|(\\)/.test(inputFile.value)) {
      alert("File is not a valid file.  Please use the Browse button to select a file.");
      inputFile.select();
      inputFile.focus();
      return false;
    }
  }

  return true;
}

function submitForm() {
  document.forms[0].submit();
}

Me doy cuenta de que aún es necesario que haya validación del lado del servidor para el archivo, pero esto es sólo para prevenir un usuario haga clic en el botón Enviar y no ver todo lo que ocurre. Además, se asume es decir, utilizando un sistema operativo de Windows.

Otros consejos

¿Qué tal este? No se puede escribir, o haga clic derecho y pegar. 

<input type="file" name="file" onKeyDown="this.blur()" onContextMenu="return false;">

Esto puede ser una mala idea para empezar. ¿Y si el usuario no está utilizando un sistema operativo Windows y quiere cargar el archivo /home/user/example.txt?

Este tipo de control se puede implementar mejor lado del servidor.

Una forma es poner un poco de código JavaScript en los botones onsubmit. La idea que es para validar la caja y, o bien dejar de sumisión o permitirlo.

Sin embargo, usted es probablemente mejor simplemente validar el lado del servidor contenido del archivo y haciendo que el error apropiado al cliente.

propiedad value = el tipo de elemento de archivo de entrada es de sólo lectura que para la emisión de seguridad. Usted puede leer esta propiedad y hacer una verificación. Si no se corresponde con sus reglas, va a dar a una persona y dejar que advertir a modificarlo. La otra manera de utilizar la propiedad de anulación outerHTML ella. por ejemplo: HTML elemento de archivo de entrada llamado objInputFileElement. objInputFileElement.outerHTML = "";

¿No podría utilizar 

<input ... disabled>

editar : no, en realidad que impide la presentación, así ... pero en HTML 4 aparentemente 

<input ... readonly>

debería funcionar. http://htmlhelp.com/reference/html40/forms/input.html

He encontrado la opción que resuelve su problema. Es la opción contentEditable de la siguiente manera: 

<input type="file" name="name" contentEditable="false"/>

Esta es una demostración de la opción contentEditable: 

<input type="file" name="name" contentEditable="false" />

Me basé mi solución en este hilo .

Por lo tanto, teniendo en cuenta este campo archivo: 

<input type="file" id="file_field">

Lo tengo de trabajar con algo como esto en jQuery: 

$(document).ready( function() {
    $('#file_field').bind("keydown", function(e) {
        e.preventDefault();
    });
});

Nota: Debe utilizar keydown en lugar de pulsación de tecla , ya que cubre RETROCESO DEL y así como cualquier tecla de impresión.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top