Проверка совместимости браузера с HTML5 перед выбором типа поля ввода
Скажем, у меня есть код JavaScript, который выглядит так:
function CheckDateField()
{
if (!Modernizr.inputtypes.date) {
$(function () {
$(".datefield").datepicker();
});
}
}
Это проверяет, совместима ли версия браузера с HTML 5, и в этом случае использует поле даты; еще текстовое поле.
В моем представлении .NET Core есть такое поле:
<div class = "form-group">
<label asp-for = "DOB" class = "control-label"></label>
@*@Html.TextBox("datepicker")*@
@Html.TextBox("datepicker", null, new { @readonly = "readonly" })
Как использовать поле в JavaScript? Я пробовал это:
<label asp-for = "DOB" class = "control-label" onload = "CheckDateField()"></label>
Было бы хорошо, если возможно, поместить JavaScript прямо в лавочку. Я потратил два часа на поиск в Google и попробовал несколько вещей, которые не сработали.
Этот селектор $(".datefield") не найдет никаких элементов в вашей текущей разметке. Где вы устанавливаете класс datefield для input?
Кроме того, вместо проверки функции onload() сделайте это в $(function () { });.
Как это: jsfiddle.net/bhwog7a9 Если это то, что вы ищете, я могу опубликовать ответ.
@melancia, да, пожалуйста. Функция JavaScript не завершается, потому что сообщает, что Modernizr не найден. Какой скрипт мне нужно добавить для Modernizr? Это: bootstrap.js?
@ADyson, см. Мой комментарий выше. Как мне найти Modernizr? Спасибо.
Вам необходимо включить библиотеку Modernizr, как и другие (например, jQuery). modernizr.com
Спасибо. Я установил его (через диспетчер библиотек), и теперь он, похоже, работает. Я полагаю, это не часть шаблона .NET Core 2.1?
Я еще не очень хорошо знаком с .NET Core, но я опубликовал ответ. Надеюсь, это поможет.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете упростить свой код, просто проверив функцию HTML5 input date при загрузке страницы и действуя соответствующим образом.
Кроме того, селектор, который вы используете для захвата элемента, не будет работать, поскольку input не имеет установленного класса datefield.
Созданная вами разметка будет выглядеть примерно так:
<label for = "dob">Date of birth</label>
<input type = "date" name = "dob" id = "dob" class = "datefield">
Обратите внимание на отсутствие обработчика событий onload и то, что для начала вы устанавливаете input type на date.
Ваш бит скрипта для обработки datepicker должен быть похож на этот:
// When the document is ready.
$(function () {
// If input type date isn't supported.
if (!Modernizr.inputtypes.date) {
var el = $(".datefield");
// In a single call (chained) set the input type to text
// and attach the datepicker.
el.prop("type", "text").datepicker();
}
});
Спасибо. Это работает +1. Есть ли какие-либо последствия изменения класса с «управления формой» на «поле даты» на стороне сервера в соответствии с вашим ответом? +1.
Вы можете изменить селектор по своему усмотрению. Подробнее здесь: Селекторы CSS
Спасибо. Я задал следующий вопрос, если вам интересно: stackoverflow.com/questions/52949847/…
вам нужно будет добавить класс datepicker в текстовое поле, иначе jQuery не будет работать с ним. Насколько я знаю, на этикетке нет события "загрузки". Вместо этого просто запустите функцию CheckDateField, как только DOM будет готов, используя блок jquery document.ready