在html5日期字段上启用复制/粘贴 [英] Enable copy/paste on html5 date field

问题描述

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

Am able to copy values from textbox and paste into another textbox in my html5 form. Same way how can i copy value from the date field.

< input type =date/>

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

I want to copy value from one date field and paste it to another date field.

推荐答案

原生？

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

No, an date input field behaves differently than an text input field.

解决方法

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

I had the same problem once and created a workaround.

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

When you dlbclick the input field, it temporarely changes itself to a text input field and automaticly select its value. So you can copy the date by using CTRL + C

当您要复制日期时，它也可以使用从和文本字段进入日期输入字段。

It also works when you want to copy a date from and text field into the date input field.

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

Register an focusout event to reset the input to its original state type="date".

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

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

这篇关于在html5日期字段上启用复制/粘贴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！