Как отключить ввод текстового поля в IE? - PullRequest
Новая
       22

Как отключить ввод текстового поля в IE?

8 голосов
/ 26 февраля 2009

Можно ли запретить пользователю вводить текстовое поле для ввода файла в IE? Причина, по которой я спрашиваю, состоит в том, что если пользователь вводит текст, который не похож на путь файловой системы (например, не начинается с чего-то вроде c: ...), то когда пользователь нажимает кнопку отправки, ничего не произойдет.

Я бы не хотел, чтобы пользователь вводил текст в поле, или отправил форму как обычно.

Я обнаружил, что тот же вопрос был задан здесь без ответа: http://www.webmasterworld.com/html/3290988.htm

И этот человек придумал хак, который я могу использовать, если нет другого подходящего ответа: http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

РЕДАКТИРОВАТЬ: Чтобы уточнить - если пользователь вводит «не путь к файлу» в текстовом поле рядом с кнопкой «Обзор» и нажимает кнопку «Отправить», в IE ничего не произойдет. Форма не будет отправлена ​​- IE не позволяет отправлять форму, если в поле нет реального пути к файлу.

Ответы [ 9 ]

7 голосов
/ 09 апреля 2009

Как насчет этого? Вы не можете напечатать или щелкнуть правой кнопкой мыши и вставить. 

<input type="file" name="file" onKeyDown="this.blur()" onContextMenu="return false;">
2 голосов
/ 27 февраля 2009

Я решил эту проблему другим способом, используя кнопку вместо отправки и используя JavaScript для проверки значения перед отправкой. 

<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();
}

Я понимаю, что для файла все еще должна быть проверка на стороне сервера, но это только для того, чтобы пользователь не нажимал на кнопку "Отправить" и ничего не видел Также предполагается, что IE использует ОС Windows.

2 голосов
/ 26 февраля 2009

Это может быть плохой идеей для начала. Что делать, если пользователь не использует ОС Windows и хочет загрузить файл /home/user/example.txt?

Этот тип проверки может быть лучше реализован на стороне сервера.

1 голос
/ 09 марта 2011

свойство value элемента input type = file только для чтения и относится к вопросам безопасности. Вы можете прочитать это свойство и сделать проверку. Если это не соответствует вашим правилам, вы дадите предупреждение и дадите человеку возможность его изменить. Другой способ использовать свойство externalHTML переопределить его. например: Элемент входного файла HTML с именем objInputFileElement. objInputFileElement.outerHTML = "";

1 голос
/ 26 февраля 2009

Одним из способов является добавление небольшого JavaScript-кода в кнопки отправки. Идея состоит в том, чтобы подтвердить поле и либо прекратить отправку, либо разрешить ее.

Однако вам, вероятно, лучше просто проверить серверную часть содержимого файла и вернуть соответствующую ошибку клиенту.

0 голосов
/ 17 февраля 2015

Я основал свое решение на этой теме .

Итак, учитывая это поле файла: 

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

Я получил его для работы с чем-то вроде этого в jquery: 

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

ПРИМЕЧАНИЕ: Вы должны использовать нажатие клавиши вместо нажатие клавиши , поскольку оно охватывает также DEL и BACKSPACE как любой ключ печати. ​​

0 голосов
/ 10 апреля 2012

Вот демонстрация опции contentEditable: 

<input type="file" name="name" contentEditable="false" />
0 голосов
/ 10 апреля 2012

Я нашел вариант, который решает вашу проблему. Является ли параметр contentEditable следующим образом: 

<input type="file" name="name" contentEditable="false"/>
0 голосов
/ 26 февраля 2009

Не могли бы вы использовать 

<input ... disabled>

РЕДАКТИРОВАТЬ : нет, на самом деле это также препятствует представлению ... но в HTML 4, по-видимому, 

<input ... readonly>

должно работать. http://htmlhelp.com/reference/html40/forms/input.html

...