Question

我制作了一个.NET mvc应用程序，其中我有一个字段。在iPhone（在Safari中），一旦我点击此字段，就会出现本机iOs日期选择器。它可以工作，我可以选择一个日期，确认它（用“完成”按钮）并提交表格。

然后我再次访问此页面：日期已经定价; 例如，我将拥有：

<input type="date" value="2012-06-30">

我可以更改但我无法使用相对按钮清除它。该日期仍在现场。如果我在此字段中添加新日期然后按“清除”，则会返回到之前的值（2012年6月30日）。

如果加载时日期字段为空白，我可以对其进行加价，当我按下清除时，该字段将为空。

因此，“清除”按钮实际上并不清除字段中的日期，而是根据字段显示给用户时的值属性对其进行加价。

如何使用“清除”按钮清除（放置空值）而不使用Javascript？

谢谢

P.S。在桌面浏览器（Chrome，IE，FF，Edge）上，它可以与原生日期选择器一起使用。

Answer 1

这是一个有趣的问题要解决iOS问题。 仅供参考，我不使用iOS Safari，而是使用wkwebview作为混合应用程序。 clear按钮似乎检索输入字段的defaultValue然后从value恢复defaultValue属性。虽然此值显然不是HTML可访问属性，但您可以通过JavaScript修改它：

首先，您要为日期输入设置focus事件处理程序。之后，您在处理程序中需要做的就是设置defaultValue：evt.currentTarget.defaultValue = '';。

我希望这可以帮助您解决问题！

Answer 2

以下是我的想法。抱歉，是的，您必须使用JavaScript。我正在手动添加HTML中的按钮，但是通过进一步的工作，我可以让脚本动态添加按钮。（取消该操作也使示例更简单）

HTML：

<input type="date" id="theDate">&nbsp;<button type="button" class="clearField" data-target="theDate">Clear</button>

JavaScript / jQuery：

function initClearFields() {
    var $clearButtons = $( 'button.clearField' );
    $clearButtons.on( 'click', function() {
        var $target = $( 'input#' + $(this).data('target') );
        $target.attr( 'data-origVal', $target.val() );
        $target.attr( 'value', '' );
        $target.val( '' );
        $target.change();
    } );
    $clearButtons.closest('form').on( 'reset', function(event) {
        $clearButtons.each( function( index ) {
            var $target = $( 'input#' + $(this).attr('data-target') );
            if( typeof $target.attr( 'data-origVal' ) !== 'undefined' ) {
                $target.attr( 'value', $target.attr( 'data-origVal' ) );
                $target.removeAttr( 'data-origVal' );
            }
        } );
    } );
}

$(document).ready(function () {
    initClearFields();
}

这是在输入之后添加一个手动“清除”按钮的功能。当您单击按钮时，它将“ data-origVal”属性添加到输入，然后将“ value”属性设置为“”（空）。如果表单为“重置”，则脚本首先获取原始值，然后将其还原到value属性。

注意：为了与Grunt兼容，我在这里使用了一些“旧”约定。随时使用.data('x' ...)代替.attr('data-x' ...)。

Answer 3

这是一个古老的问题，但是已经被浏览了很多次，因此我将对@abriggs答案进行一些小的修改。正如评论中指出的那样，通过JavaScript将str设置为焦点不足以使日期选择器完美工作。这是我使用纯Javascript的解决方案：

\n

在输入上设置default_value也会设置$(window).on("load", function() { dateClearableOnMobile(); }); const dateClearableOnMobile = function () { const dateFields = document.querySelectorAll('input[type="date"]'); for (let dateField of dateFields) { const value = dateField.value; dateField.defaultValue = '' dateField.value = value; } };。答案是将defaultValue设置为空字符串后，将值重置为原始值。

iOs Safari：清除输入类型日期

3 个答案: