Question

我正在使用input type=date来捕获用户的日期。因为我们不能有输入的占位符（type = date），所以我做了以下的事情：

使用带有占位符的Type文本创建了输入字段
在JS中，关注焦点，将类型更改为日期

$("#datefield").on('focus', function() { $("#datefield").attr('type', 'date'); })

在IOS中，这很好用，每次点击输入字段时都会带来原生日期选择器。但在android中，它带来了原生的日期选择器，但我必须点击两次。调试之后，我发现它首先通过焦点事件并将类型更改为日期。在第二次单击时，它不会通过事件，但会带来本机键盘。之后，只要我停留在该页面上，因为类型已更改为日期，它将在一次点击时带来原生日期选择器。

我是以正确的方式处理它吗？我究竟做错了什么？有没有更好的方法呢？

P.S。我想尽可能地避免使用插件。我正在使用HTML，CSS，JS，Jquery

Answer 1

尝试使用onfocus属性将文本字段更改为日期字段。

我希望这可以帮助你...

<input placeholder="Date" type="text" onfocus="(this.type='date')" id="date">

或使用jquery

$('input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"]').each(function() {
    var el = this, type = $(el).attr('type');
    if ($(el).val() == '') $(el).attr('type', 'text');
    $(el).focus(function() {
        $(el).attr('type', type);
        el.click();
    });
    $(el).blur(function() {
        if ($(el).val() == '') $(el).attr('type', 'text');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input name="date" type="date" placeholder="Date">

cordova app

1 个答案: