iOs Safari:清除输入类型日期

时间:2016-05-02 07:34:02

标签: c# ios asp.net-mvc datepicker mobile-safari

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

iPhone's datepicker

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

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

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

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

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

如何使用“清除”按钮清除(放置空值)而不使用Javascript?

谢谢

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

3 个答案:

答案 0 :(得分:0)

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

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

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

答案 1 :(得分:0)

以下是我的想法。抱歉,是的,您必须使用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' ...)

答案 2 :(得分:0)

这是一个古老的问题,但是已经被浏览了很多次,因此我将对@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设置为空字符串后,将值重置为原始值。