时间戳

首页 > 解决方案 > 在确定输入字段的类型之前检查浏览器是否兼容 HTML5

javascript - 在确定输入字段的类型之前检查浏览器是否兼容 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 直接放在 lavel 中。我花了两个小时在谷歌上搜索这个并尝试了一些没有用的东西。

标签： javascriptc#asp.net-core

解决方案

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

演示

推荐阅读