单击输入类型 = 日期时将 2 步减少到 1 步

Posted 2023-03-05

【中文标题】单击输入类型 = 日期时将 2 步减少到 1 步

【英文标题】：Reducing 2 steps to 1step when clicked on input type=date

【发布时间】：2015-09-24 12:06:20

【问题描述】：

所以我在cordova 类型的移动应用程序中使用input type="date"。出于某种原因，如果输入类型是日期，placeholder 将不会出现。因此，当单击日历时，会出现一个类似的空按钮。因此，我正在尝试遵循input type="text" 具有placeholder“下一个行动日期”的 hack。而onfocus 我将类型更改为date。和onblur 我改回type="text" 并再次创建placeholder。所以这个过程部分解决了我正在尝试解决的问题。哪个让那个白色按钮的东西消失。但是在我当前的代码中，我必须遵循两个步骤

首先是点击占位符，然后 onfocus 将被触发并使白色的东西出现 第二个是我必须点击白色的东西才能显示日历

我不希望出现第二步。这是我的代码

<ElementsBasket name='nextActionDate' 
    data=this.props.newLead.get('actions').get('nextActionDate')>
        <div className="form-group">
         <input type="text" className="form-control" onFocus=this._onFocus onBlur=this._onBlur placeholder="Next Action Date"        
                       value=this.props.newLead.get('actions').get('nextActionDate')
                       onChange=onFieldChanged.bind(this, 'actions.nextActionDate')
                       />       
        </div>
</ElementsBasket>



_onFocus: function(e)
       e.currentTarget.type = "date";
    ,


    _onBlur:function(e)
      e.currentTarget.type="text"
      e.currentTarget.placeholder = "Next Action Date";
    ,

我也试过onclick，也分了两步。我已经关注了这个链接 Not showing placeholder for input type="date" field

PS：白色的东西是一个没有文字的按钮，点击后会给出一个日历

【问题讨论】：

您是否只想在用户调用他必须输入的站点时填写日期字段？告诉我们更多关于你想要实现的功能或事物的信息。我不明白，你到底有什么。也许提供屏幕截图或类似的东西。

用户点击输入按钮，初始状态为type="text"，有一个占位符="Next Action Date"，点击后onFocus会被触发出现一个没有文字的白色按钮。所以用户必须再次单击它才能获得日历。有什么我可以澄清的吗？

不，我不明白你为什么要这么复杂地解决你的问题？！你希望按钮是什么？用户可以在其中选择日期的日历？您想要该按钮的占位符或类似的东西吗？我要拉小提琴

请参考更新后的问题！

jsfiddle.net/L94e5kee/2 看看这个小提琴，用你的手机检查一下。那对你有用吗？

【参考方案1】：

您可以尝试触发焦点或点击事件：

_onFocus: function() 
     e.currentTarget.type = "date";
     e.currentTarget.focus(); // or .click();

【讨论】：

我想你在附近，但它仍然无法正常工作。正如你提到的，我尝试了焦点和点击。但逻辑是完美的

您正在使用click() 进行测试吗？可能跟 jquery trigger() 功能更兼容，我不知道。我向你保证我现在就调查它

是的，我使用 e.currentTarget.focus() 和 e.currentTarget.click() 进行了测试。但是触发器是不同的，代码会使触发器发生，但这里是用户正在使 onFocus 和 onBlur 发生。如果我错了，请纠正我！

有没有办法像这样链接 e.currentTarget.click().type("date");这虽然行不​​通！但是有什么东西可以这样看？

我认为这很有用：***.com/a/30895180/5035890 在这个答案中，用户告诉触发F4 键盘事件会在 chrome 中启动 datepicker。你可以在手机上测试。告诉我们是否是您的解决方案！

【参考方案2】：

尝试将日期输入覆盖在占位符输入上，并将日期输入设置为 CSS opacity: 0。因此，当用户尝试点击占位符输入时，他们实际上是点击了日期输入。

这是一个示例 JSBin。 http://jsbin.com/rozusihade/edit?css,js,output

注意更新日期输入外观的onDateInputFocus 和onDateInputBlur 回调。

【讨论】：

似乎是一个绝妙的解决方案，请给我一些时间来验证这一点！ @保罗

【参考方案3】：

试试 onfocus=""

<input placeholder="select date" type="text" onfocus="(this.type='date')">

http://codepen.io/anon/pen/zGaQax

否则，我将使用 ng-show 制作一个占位符，而不是更改输入标签。如果要使用本地日期选择，输入标签应始终为“日期”。 （这总是应该做的）

【讨论】：

不，这是我一开始就尝试过的。这行不通