iOS Safari：清除日期输入类型

Question

我在.NET MVC应用程序中创建了一个表单，其中包含一个字段。 在iPhone上（在Safari中），一旦我点击此字段，就会出现本机iOS日期选择器。 它可以工作，我可以选择日期，确认它（使用“完成”按钮）并提交表单。

然后我再次访问这个页面：日期已经被赋值； 例如，我会得到这个：

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

我可以更改它，但我无法使用相关按钮清除它。日期仍然在字段中。 如果我在此字段中放入新日期，然后按“Clear”，它会返回先前的值（2012年6月30日）。

如果加载时日期字段为空，我可以将其赋值，当我按Clear时，该字段将为空。

因此，“Clear”按钮实际上并没有清除字段中的日期，而是根据字段在向用户显示时具有的value属性进行赋值。

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

谢谢

附言。 在桌面浏览器（Chrome、IE、FF、Edge）中，它与它们的本机日期选择器一起正常工作。

- Pittogatto

---

请勿重复：https://stackoverflow.com/q/52218578/339440 - Stephen R

Answer 1

这是在iOS上解决的一个有趣问题。 仅供参考，我没有使用iOS Safari，而是在混合应用程序中使用wkwebview。 看起来，clear按钮检索输入字段的defaultValue，然后从该defaultValue恢复value属性。 尽管此值显然不是HTML可访问属性，但您可以通过JavaScript进行修改：

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

希望这能帮助您解决问题！

- abriggs

---

这种方法的问题在于，如果我打开日期选择器，点击“完成”而没有更改日期，那么值也会被重置清除。 - calfzhou

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' ...)。

- Stephen R

Answer 3

这是一个老问题，但已经被查看了很多次，所以我会对@abriggs的答案进行一些小修改。正如评论中指出的那样，仅通过Javascript在焦点上设置default_value并不足以使日期选择器完美工作。以下是我用普通Javascript编写的解决方案：

$(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也会设置value。解决方法是在将defaultValue设置为空字符串后，将值重置为最初的值。

- Adam G