启用粘贴到输入[type='date']？答案

【问题标题】：Enable pasting into input[type='date']?启用粘贴到输入[type='date']？
【发布时间】：2015-09-09 16:24:09
【问题描述】：

似乎无法将<input type='date' /> 粘贴到 Chrome 中。我尝试了各种格式，包括 yyyy-MM-dd MM/dd/yyyy，甚至一次只粘贴一个组件（只是一个月或一年），但没有任何反应。我正在使用 Angular 应用程序，我什至尝试设置 onpaste 事件将粘贴的内容推送到 Angular 模型中，但它永远不会触发。

这是我所拥有的：

HTML

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

角度指令：

'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 语句。没有抛出任何错误，并且似乎没有将任何值输入到视图或模型中。

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

【问题讨论】：

标签： javascript angularjs date paste

【解决方案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;
});

【讨论】：

【解决方案2】：

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

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

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

【讨论】：