在html5日期字段上启用复制/粘贴

Question

能够从文本框复制值并粘贴到我的html5表单中的另一个文本框中。同样如何从日期字段中复制值。

<input type="date" />

我想从一个日期字段中复制值并将其粘贴到另一个日期字段。

Answer 1

因此，您可以使用 jQuery 使用copy和paste事件执行此操作，从一个值中取值，然后使用假冒值将其插入另一个剪贴板

更新

注意：我刚刚发现了一个奇怪的怪癖。如果单击第一个日期框并键入日期，则需要在复制前单击“关闭”输入。粘贴到第二个盒子也是如此。我无法弄清楚为什么会这样。

＆＃13;

＆＃13;

var dateClipboard;

$("input[type='date']").on("copy", function(){
 dateClipboard = $(this).val();
 alert("copied");
})

$("input[type='date']").on("paste", function(){
 if(dateClipboard != ''){
   $(this).val(dateClipboard); 
   alert("pasted");
 }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input type="date" name="test" id="test">
<input type="date" name="test" id="test2">

＆＃13;

＆＃13;

＆＃13;

Answer 2

原生？

不，日期input字段的行为与文字input字段的行为不同。

解决方法

我曾遇到过同样的问题并创建了一个解决方法。

当您dlbclick输入字段时，它会临时将自身更改为text输入字段并自动选择其值。因此，您可以使用 CTRL + C

复制日期

当您想要将日期和文本字段复制到日期输入字段时，它也有效。

注册focusout事件，将输入重置为原始状态type="date"。

＆＃13;

＆＃13;

var dateInputs = document.querySelectorAll('[type="date"]');

for(var i = 0;i < dateInputs.length;i++)
{
  dateInputs[i].addEventListener("dblclick", function() {
    this.type = "text";
    this.select();
  });
  
  dateInputs[i].addEventListener("focusout", function() {
   this.type = "date";
  })
}

＆＃13;

input {
  display: block;
  width: 150px;
}

＆＃13;

<label>Double click me</label>
<input type="date" value="2011-09-29" />
<input type="date" placeholder="paste the date here" />

＆＃13;

＆＃13;

＆＃13;

Answer 3

尝试一下（使用jQuery）

$(() => {
    $(document).on("keydown", "input[type=date]", function (e) {
        if (e.ctrlKey === true) {
            if (e.keyCode === 67) {
                $(this).attr("type", "text").select();
                document.execCommand("copy");
                $(this).attr("type", "date");
            }
        }
    });
    $(document).bind("paste", function (e) {
        let $input = $(document.activeElement);
        if ($input.attr("type") === "date") {
            $input.val(e.originalEvent.clipboardData.getData('text'));
        }
    });
});