允许在input[type='date']中粘贴内容？

Question

似乎在Chrome浏览器中无法粘贴。我尝试了各种格式，包括yyyy-MM-dd、MM/dd/yyyy，甚至仅粘贴一个组件（仅月份或仅年份），但没有任何反应。我正在使用angular应用程序，我甚至尝试设置onpaste事件将粘贴的内容推送到angular模型中，但它从未触发。

以下是我的代码：

HTML

<input date-field type='date' ng-model='dateOfBirth'/>

Angular指令：

'use strict';

angular.module('angularcoreApp').directive('dateField', function($filter) {
  return {
      require: 'ngModel',
      link: function(scope, element, attrs, ngModelController) {
        element[0].addEventListener('paste', function () {
          debugger;
          alert(arguments);
        }, false);
        ngModelController.$parsers = [];
        ngModelController.$parsers.push(function(data) {
          //View -> Model
          var date = Date.parseExact(data, "yyyy-MM-dd");
          ngModelController.$setValidity('date', date!=null);
          return date;
        });
        ngModelController.$formatters = [];
        ngModelController.$formatters.push(function(data) {
          //Model -> View
          return $filter('date')(data, "yyyy-MM-dd");
        });
       }
    }
});

我也导入了datejs库。

目前，我在粘贴事件监听器中从未触发debugger语句。没有任何错误被抛出，似乎没有任何值被输入到视图或模型中。

我该如何允许将日期粘贴到此输入框中？

- Corey Ogburn

Answer 1

我的解决方法大致如下：

const input = document.getElementById('my-input');

document.querySelector('body').addEventListener('paste', (e) => {
  if (document.activeElement !== input) {
    return;
  }

  const value = e.clipboardData.getData('text');

  input.value = value;
});

- Beau

Answer 2

我在2016年遇到了同样的问题，并发现可以通过将输入包装在其他元素中来解决这个问题。

<div id="wrapped" onpaste="alert(11)">
    <input type="date" id="input1">
</div>

知道 div 元素可以用于“粘贴”事件，因此可以修改输入数据。

- Mikhail Boyarsky