Meteor Autoform - 在桌面而非移动设备上提交隐藏输入作品
Meteor Autoform - Submitting Hidden Input Works on Desktop but not mobile
我的问题是:有谁知道为什么隐藏的表单输入会在桌面浏览器上提交而不是在移动设备上提交?在桌面上,我已经用 FireFox 和 Safari 进行了测试。在手机上,我用 Safari 测试过。
背景
我有一个自动表单,它使用自定义小部件来允许用户select 事件的日期和时间。
在此小部件中,有三个输入字段:日期、时间和时区(以防事件发生在不同的时区)。
有两个隐藏的输入字段,一个用于日期时间对象,一个用于用户 select 编辑的时区(单独存储,以便我知道稍后如何显示给他们)。
当我在笔记本电脑上提交此表单时,一切都按预期进行。三个可见值被丢弃,两个隐藏输入被写入数据库。
但是,在移动浏览器 (iPhone 6/Safari) 上进行测试时,隐藏的输入显然没有被捕获,我无法提交表单,因为日期是必需的键。
不确定这是否有帮助,但是我的自动表单如下所示:
{{#autoForm collection="Events" id="updateEndDate" type="update" doc=this resetOnSuccess="false"}}
<fieldset>
{{> afFieldInput name="endDate" type="dateAndTime" }}
</fieldset>
<button class="btn btn-primary" type="submit">
<i class="fa fa-floppy-o"></i>
</button>
<button class="btn btn-default" id="cancelForm" type="cancel">
<i class="fa fa-trash-o"></i>
</button>
{{/autoForm}}
我的自定义 "dateAndTime" 小部件如下所示:
<div class="form-group">
<input class="form-control hidden"
data-schema-key={{this.name}}
name={{this.name}}
type="datetime-local" value={{dateTime}}>
<div class="form-inline">
<div class="form-group">
<input autocomplete="off" class="form-control"
id="date" placeholder="Select a date"
type="text">
</div>
<div class="form-group">
<input autocomplete="off" class="form-control typeahead"
data-autoselect=true data-highlight="true"
data-selected="timeSelected"
data-source="times" id="time"
placeholder="Add a time?"
spellcheck="off" type="text">
</div>
<div class="form-group">
{{> timezonePicker class="form-control" selected=timezoneName }}
</div>
</div>
</div>
<div class="form-group">
<input class="form-control hidden" type="text"
name={{this.atts.tzName}} data-schema-key={{this.atts.tzName}} value= {{selectedTimezone}}>
<span class="help-block">{{afFieldMessage name=this.atts.tzName}}</span>
</div>
根据 this question 看来 datetime
输入类型在 iOS Safari 中不受支持。我认为这就是您遇到此问题的原因,并且需要将 datetime
字段分成 2 个单独的字段 - 一个用于 date
,另一个用于 time
.
Here's a bit more info on this subject, and you can compare all the differences between something like chrome and iOS safari here.
我的问题是:有谁知道为什么隐藏的表单输入会在桌面浏览器上提交而不是在移动设备上提交?在桌面上,我已经用 FireFox 和 Safari 进行了测试。在手机上,我用 Safari 测试过。
背景
我有一个自动表单,它使用自定义小部件来允许用户select 事件的日期和时间。
在此小部件中,有三个输入字段:日期、时间和时区(以防事件发生在不同的时区)。
有两个隐藏的输入字段,一个用于日期时间对象,一个用于用户 select 编辑的时区(单独存储,以便我知道稍后如何显示给他们)。
当我在笔记本电脑上提交此表单时,一切都按预期进行。三个可见值被丢弃,两个隐藏输入被写入数据库。
但是,在移动浏览器 (iPhone 6/Safari) 上进行测试时,隐藏的输入显然没有被捕获,我无法提交表单,因为日期是必需的键。
不确定这是否有帮助,但是我的自动表单如下所示:
{{#autoForm collection="Events" id="updateEndDate" type="update" doc=this resetOnSuccess="false"}}
<fieldset>
{{> afFieldInput name="endDate" type="dateAndTime" }}
</fieldset>
<button class="btn btn-primary" type="submit">
<i class="fa fa-floppy-o"></i>
</button>
<button class="btn btn-default" id="cancelForm" type="cancel">
<i class="fa fa-trash-o"></i>
</button>
{{/autoForm}}
我的自定义 "dateAndTime" 小部件如下所示:
<div class="form-group">
<input class="form-control hidden"
data-schema-key={{this.name}}
name={{this.name}}
type="datetime-local" value={{dateTime}}>
<div class="form-inline">
<div class="form-group">
<input autocomplete="off" class="form-control"
id="date" placeholder="Select a date"
type="text">
</div>
<div class="form-group">
<input autocomplete="off" class="form-control typeahead"
data-autoselect=true data-highlight="true"
data-selected="timeSelected"
data-source="times" id="time"
placeholder="Add a time?"
spellcheck="off" type="text">
</div>
<div class="form-group">
{{> timezonePicker class="form-control" selected=timezoneName }}
</div>
</div>
</div>
<div class="form-group">
<input class="form-control hidden" type="text"
name={{this.atts.tzName}} data-schema-key={{this.atts.tzName}} value= {{selectedTimezone}}>
<span class="help-block">{{afFieldMessage name=this.atts.tzName}}</span>
</div>
根据 this question 看来 datetime
输入类型在 iOS Safari 中不受支持。我认为这就是您遇到此问题的原因,并且需要将 datetime
字段分成 2 个单独的字段 - 一个用于 date
,另一个用于 time
.
Here's a bit more info on this subject, and you can compare all the differences between something like chrome and iOS safari here.