HTML input 四个角拖动,通过拖动调用HTML5输入(Invoke HTML5 inputs by dragging)

通过拖动调用HTML5输入(Invoke HTML5 inputs by dragging)

我使用HTML5输入来选择日期。

我只想在用户点击特定图片时打开该输入，但我无法强制移动浏览器打开他们的日期选择器。

这是元素：

简单的问题：如何用javascript打开？

I am using HTML5 inputs to select a date.

I simply want to open that input if the users clicks on a specific image but I can't force the mobile browsers to open their datepickers.

Here is the element:

Simple question: How to open in with javascript?

原文：https://stackoverflow.com/questions/12799577

更新时间：2019-11-16 04:22

最满意答案

当用户聚焦表单元素时，HTML5日期选择器会打开。 如果单击/触摸图像，则与获得焦点不同。

但你可以通过在图像点击上触发焦点事件来模拟这种行为：

jQuery( '#date-input-image-1' ).click( function() {

jQuery( '#date-input-1' ).focus();

} )

The HTML5 datepickers open when the users focuses a form element. If you click/touch an image this is not the same as getting the focus.

But you could probably emulate this behavior by firing the focus-event on the image-click:

jQuery( '#date-input-image-1' ).click( function() {

jQuery( '#date-input-1' ).focus();

} )

相关问答

只用HTML5和JS,CSS写的游戏(2048，围住神经猫，flappy bird)，之前火过一段时间，现在还好，有发展前景，但是只适合轻中度游戏，不能做大型重度游戏

在您链接的示例中，函数drag()由图像节点的onDragStart事件触发。 这个事件对象被传递给drag()的ev参数，通过ev.target给drag()函数访问事件的目标 - 也就是你要拖动的元素。 由于您具有目标，因此可以使用ev.target.parentNode访问目标的父节点，并且可以通过ev.target.parentNode.id访问父节点的ID。 In the example you linked, the function drag() is triggered by th

...

如果你想自己做拖放，你可能想要一个div包围可拖动的div，所以你可以使用较大的div的顶部作为可拖动区域。 所以你有了

...

这个代码纯粹是例如，不会工作，顺便说一句。 因此，在draggablediv上，您将放置一

...

当用户聚焦表单元素时，HTML5日期选择器会打开。 如果单击/触摸图像，则与获得焦点不同。 但你可以通过在图像点击上触发焦点事件来模拟这种行为： jQuery( '#date-input-image-1' ).click( function() {

jQuery( '#date-input-1' ).focus();

} )

The HTML5 datepickers open when the users focuses a form element. If you click/tou

...

不， HTML5范围输入只接受一个输入。 我建议您使用类似jQuery UI范围滑块的任务。 No, the HTML5 range input only accepts one input. I would recommend you to use something like the jQuery UI range slider for that task.

你试过preventDefault吗？ $("#scroll_area").on('mousedown', function (e) {

e.preventDefault();

});

这将阻止所有拖动页面。 然后，您可以实现您希望在拖动时发生的功能。 JSFiddle示例： http ： //jsfiddle.net/nwGaF/1/ Have you tried preventDefault? $("#scroll_area").on('mousedown', function (e

...

您的服务器端解决方案与客户端解决方案无关。 如果明天的浏览器支持一种名为Ray的新输入类型，那么Ruby是否支持它并不重要。 您的表单将作为HTTP POST发送数据，Ruby和任何其他体面的服务器端应用程序都可以处理。 Your server-side solution has nothing to do with your client-side solution. If tomorrow browsers support a new input type called Ray, then i

...

我写了你正在看的演示 所以相关的drawImage看起来像这样： context . drawImage(image, dx, dy, dw, dh) 这是目的地x，y，宽度和高度。 这意味着，无论原始图像的大小如何，您都可以将其绘制得更大或更小。 在我的框示例中，您可以更改fillRect的宽度和高度，而在此处您应该只更改drawImage的dw和dh值。 所以在你的transform.js文件的第32行，而不是150,150的dw,dh值，应该有相当于保存(和修改)的宽度和高度，就像在我的演示

...

经过几天的测试，我终于找到了罪魁祸首：使用myContext.drawImage()切片图片只是iOS中的一大难题(可能是由于视网膜显示，但我不是100％肯定) 。 我所做的是双缓冲和使用myContext.drawImage()的组合， 只能缩放，而不是切片。 FelineSoft在帆布相关的几件事上有很棒的帖子。 这里解释了双缓冲： http ： //www.felinesoft.com/blog/index.php/2010/09/accelerated-game-programming-w

...

Wicket(1.5及以后版本)不支持输入类型='日期'或开箱即用的类似结构。 Wicket Extensions中有一个DateTextField ，但它没有指定type='date' (尚未)。 我建议创建自己的实现，正确设置type属性(我猜他们为什么没有添加到该字段是因为它会破坏现有的应用程序)。 有EmailTextField ， NumberTextField 等 。 这些添加了type属性并验证服务器上的输入。 不支持HTML5输入的浏览器回退到type='text' ，因此对于Wi

...