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

Question

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

<input type="date" />

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

Answer 1

by Native？

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

workaround

我曾经有相同的问题并创建了解决方法。

当您dlbclick输入字段时，它会暂时更改为text输入字段，并自动选择其值。因此，您可以使用 ctrl c

复制日期

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

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

// get all date input fields
let dateInputs = document.querySelectorAll('[type="date"]');
dateInputs.forEach(el => {
    // register double click event to change date input to text input and select the value
    el.addEventListener('dblclick', () => {
        el.type = "text";
        
        // After changing input type with JS .select() wont work as usual
        // Needs timeout fn() to make it work
        setTimeout(() => {
          el.select();
        })
    });
    
    // register the focusout event to reset the input back to a date input field
    el.addEventListener('focusout', () => {
        el.type = "date";
    });
});

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

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

Answer 2

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

更新

NOTE ：我刚刚找到了一个奇怪的怪癖。如果单击第一个日期框并输入日期，则需要在复制之前单击输入。粘贴到第二个框中也是如此。我不知道为什么是。

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");
 }
})

<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">

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'));
        }
    });
});

Answer 4

我对Red的答案进行了一些更改，允许日期，DateTime和DateTime-Local。我希望能帮助某人的一个小变化。

// get all date input fields
let dateInputs = document.querySelectorAll('[type="datetime-local"], [type="datetime"], [type="date"]');
dateInputs.forEach(el => {
    var type = el.type;
    // register double click event to change date input to text input and select the value
    el.addEventListener('dblclick', () => {
        el.type = "text";
        
        // After changing input type with JS .select() wont work as usual
        // Needs timeout fn() to make it work
        setTimeout(() => {
          el.select();
        })
    });
    
    // register the focusout event to reset the input back to a date input field
    el.addEventListener('focusout', () => {
        el.type = type;
    });
});

<br><label>Double click me</label>
<input type="date" value="2022-03-10" />
<input type="date" placeholder="paste the date here" />
<br><br><br><br>
<br><label>Double click me</label>
<input type="datetime-local" value="2022-03-10T09:50" />
<input type="datetime-local" placeholder="paste the date here" />

Answer 5

我合并了刘易斯和菲尼克斯 - 制作适用于JS

的代码

let dateInputs = document.querySelectorAll('[type="date"]');
var dateClipboard;
dateInputs.forEach(el => {
    el.addEventListener('copy', () => {
        dateClipboard = el.value;
        //alert("copied");
    });
    el.addEventListener('paste', () => {
        if(dateClipboard != ''){
           el.value  = dateClipboard; 
           //alert("pasted");
         }
    });
});

<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">