2015-05-06 4 views
7

Я включил скрипку, показывающую, что происходит, когда вы применяете фокус к элементу, он устанавливает фокус на «дневную» часть ввода, но я могу " t найти документацию о том, как DOM отображает и идентифицирует каждую часть даты.focus month or year of html5 input [type = "date"]

Как я могу программно сфокусировать часть месяца/года элемента input[type="date"] и есть ли какая-либо документация о том, как этот тип элемента получает визуализацию в DOM?

https://jsfiddle.net/uytdhqax/

<input id="dob" type="date" /> 
document.getElementById('dob').focus() 
+0

Я предполагаю, что это браузерная вещь. Вы могли бы создать 3 входа и сосредоточить их непрерывно после ввода дня/месяца/года. –

+0

Это не вариант. Я использую AngularJS вместе с UP-Bootstrap datepicker. Мой вопрос очень прямой, и я не открываю никаких других решений: как я могу программно сфокусировать часть месяца/года элемента ввода [type = "date"], и есть ли какая-либо документация о том, как этот тип элемента получает визуализацию в доме? – trickpatty

+1

Вы можете прочитать больше здесь - это зависит от местоположения компьютера - http://stackoverflow.com/questions/7372038/is-there-any-way-to-change-input-type-date-format –

ответ

4

Это не представляется возможным в любой текущей реализации input[type=date] элемента, насколько я знаю. Кроме того, разные браузеры реализуют этот элемент по-разному, поэтому нет отдельной документации по реализации.

Нужно спросить, почему вы хотите подражать этому поведению. Изменение значения года только не даст элементу значения, если только день и месяц не были установлены. В Chrome, по крайней мере, если у вас есть элемент input[type=date], вам будет показан элемент, содержащий текст заполнителя dd/mm/yyyy. Если вы выберете партию yyyy вручную и измените ее на 2015, например, текст ввода будет теперь читать dd/mm/2015, но его value будет "" (пустая строка). Если вы вручную не редактируете детали дня и месяца, форсирование фокуса на год не принесет ничего, кроме путаницы для пользователей.

+0

спасибо за ответ. почему я пытаюсь это сделать: Chrome, похоже, реализует свой собственный фокус на каждый раздел даты, когда вы нажимаете на него. Фактически вы можете нажимать на год в хроме и вводить только год без какой-либо другой части введенной даты. Меня не интересует проверка, у меня это под контролем. Угловой пользовательский указатель даты загрузки открывает всплывающее окно и снимает фокус с ввода даты, я пытался переориентировать часть даты, на которую была нажата функция event.target. другой вариант заключается в том, чтобы попытаться остановить фокус от выхода datepicker – trickpatty

+0

@PatrickLawler да, но если вы только измените часть 'yyyy' и оставьте части' dd' и 'mm', как они есть, вы не сможете прочитайте, в каком году пользователь ввел, поскольку «значение» элемента не вычисляется до тех пор, пока все части не будут заполнены. –

+0

Я вижу, это хороший момент. Интересно, какое значение имеет значение при использовании Angg ng-model – trickpatty

2

Короткий ответ: он не поддерживается.

Если вы пытаетесь установить выбор (фокус) с помощью

var el = document.getElementById('dob'); 
var r = document.createRange(); 
el.setSelectionRange(r); 

вы получите сообщение об ошибке:

DOMException: Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('date') does not support selection.

Также только documentation I found о типе ввода даты говорит: «Не поддерживается», так что я считает, что такой документации нет. К настоящему времени кажется, что только Chrome реализует этот тип ввода.