Открыть диалог выбора файла нажатием клавиши Enter - PullRequest
Новая
       10

Открыть диалог выбора файла нажатием клавиши Enter

0 голосов
/ 04 февраля 2020

У меня проблема с моим проектом

Я хотел бы открыть входной файл с помощью клавиши "Enter", чтобы улучшить доступность.

Я добавил tabindex на ярлык, потому что когда я Перейдите к этой метке с помощью вкладки и нажмите «enter». Я хотел бы запустить функцию, которая откроет средство выбора входного файла. 

.input {
  position: absolute;
  visibility: hidden;
}
<input id="input" class="input" name="newFile" type="file" accept=".pdf" data-required="true" />
<label class="btn" for="input" tabindex="0">
  <span class="upload label">
    <span class="label__text" data-label="Upload file" data-next-label="Upload next file">Upload file</span>
  </span>
</label>

1 Ответ

0 голосов
/ 05 февраля 2020

Предупреждение Ниже приведено лишь краткое представление о том, как этого добиться путем стилизации фактического ввода и визуального скрытия метки (чтобы обеспечить ее доступность).

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

Но это действительно показывает, как вы можете стилизовать ввод, чтобы сохранить все нативные функции без необходимости повторной его реализации (активная например, состояние, которое я разработал здесь). Также не забудьте пользовательский индикатор фокуса, input:focus::before.

. Есть и другие проблемы, такие как поддержка браузера, но теоретически это должно произойти довольно изящно, я просто не тестировал его. .

Эта кодовая ручка дает хорошую отправную точку для реализации некоторых из отсутствующих функций, таких как отображение выбранного имени файла. 

input{
  color: transparent;
  width:150px;
  height:28px
}
input::-webkit-file-upload-button {
  visibility: hidden;
}
input::before {
  content: 'Select a PDF';
  color: black;
  display: inline-block;
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
  width:132px;
}
input:hover::before {
  border-color: black;
}
input:active {
  outline: 0;
}
label { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}
<input id="input" class="input" name="newFile" type="file" accept=".pdf" data-required="true"/>
<label for="input">upload file</label>
...