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

Posted 2023-03-17

【中文标题】在 html5 日期字段上启用复制/粘贴

【英文标题】：Enable copy/paste on html5 date field

【发布时间】：2018-10-03 12:47:54

【问题描述】：

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

<input type="date" />

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

【参考方案1】：

本地人？

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

解决方法

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

当您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" />

【讨论】：

我要粘贴到另一个date组件中

查看更新的答案。在秒日期字段中复制并粘贴第一个日期。

很高兴能帮上忙，编码愉快！ ;)

快乐编码.. :)

【参考方案2】：

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

更新

注意：我刚刚发现了一个奇怪的怪癖。如果单击第一个日期框并键入日期，则需要在复制之前单击关闭输入。粘贴到第二个框中也是如此。我不知道为什么会这样。

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

【讨论】：

这可以用 javascript 实现吗？因为我在 ReactJS 应用程序中工作。

【参考方案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'));
        
    );
);