是否可以专注于隐藏的输入字段？答案

【问题标题】：Is it possible to focus on the hidden input field?是否可以专注于隐藏的输入字段？
【发布时间】：2016-10-05 13:02:30
【问题描述】：

当我们单击父元素时如何触发隐藏输入字段。当我使用隐藏字段时不起作用。这是我的html代码：

<table>
<th colspan="2">Date</th>
<td id="dateContainer" > currentData </td>
<td><input id="thedate" type="hidden" /></td>
<table>

jquery 代码：

$(function(){
 $(this).click(function() {
 $(this).children().children().find('.datepicker-input').focus();
 });
});

【问题讨论】：

隐藏字段不会在 dom 中呈现。你无法集中注意力。您可以将普通文本输入设置为隐藏（通过 CSS），然后触发以显示它并聚焦
我们只使用了隐藏的css可见性？
为什么要焦点隐藏输入？
代码错误
这是一个 XY 问题。询问有关您的预期行为的问题，而不是您认为可行的解决方法。仅供参考，您提供的 HTML 标记是无效的 AFAIK

标签： jquery html jquery-ui datepicker html-table

【解决方案1】：

嗯，我想我理解了您的查询，您到底想要达到什么目的。

您想在没有可见容器的情况下显示datepicker。这似乎不可能，因为每当您加载 datepicker 时，它都需要一些 CSS 属性，例如 left, positioning 等等。如果 datepicker 容器被隐藏，它会抛出异常。

以下是实现此目的的另一种方法。创建一个空的 html 元素并向其添加日期选择器。

这是工作代码；相应地更改您的 html 结构。

JSFiddle：http://jsfiddle.net/vikash2402/8w8v9/2030/

$('#showDateContainer').click(function(){
$("#showDateItem").show && $("#showDateItem").show();
$('#showDateItem').datepicker({
        dateFormat: 'dd-mm-yy',
         onSelect: function(dateText) {
   		$('#dateContainer').text(dateText);
        console.log(dateText);
        $("#showDateItem").hide();
        }
        
    });
});

<link href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>



<div id="showDateContainer" type="button" >Click here to Shown Date</div>
<div id="showDateItem"> </div>
<br />
<br />
<div id="dateContainer" type="button" > currentData </div>

希望这会对你有所帮助:)

【讨论】：