Bootstrap 表单助手时间选择器无法在我的手机上运行 phone
Bootstrap form helper time picker not working on my mobile phone
我已经实现了 Bootstrap form helper: time picker plugin,它在我的桌面浏览器上运行正常。这是代码:
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" class="form-horizontal" role="form">
<div class="form-group">
<label for="start_time" class="col-sm-2 control-label">Start time</label>
<div class="col-sm-10">
<div class="bfh-timepicker" id="start_time" data-name="start_time">
</div>
</div>
</div>
</form>
这是结果:
这是我点击后的结果:
正如我所说,这在我的桌面浏览器上运行良好 (Google Chrome)。但是在我的手机 phone(HTC One 使用 Google Chrome)上,时间选择器无法正常工作。我可以像在第一个图中那样单击它,但是当我尝试使用向上和向下箭头输入时间时,没有任何反应。
如何解决这个问题?
编辑:使用 IE 在我的手机 phone 上试过,仍然是同样的问题。
如评论中所述,似乎很少有人支持使用此插件。我最终改用 https://github.com/Eonasdan/bootstrap-datetimepicker。
第一次改变
.on('mousedown.bfhnumber.data-api', '.inc', BFHNumber.prototype.btninc)
.on('mousedown.bfhnumber.data-api', '.dec', BFHNumber.prototype.btndec);
至
.on('touchstart.bfhnumber.data-api mousedown.bfhnumber.data-api', '.inc', BFHNumber.prototype.btninc)
.on('touchstart.bfhnumber.data-api mousedown.bfhnumber.data-api', '.dec', BFHNumber.prototype.btndec);
然后找到 "btninc" 和 "btndec" 函数
评论
$this.increment();
$this.decrement();
将"etInterval()"细化为"setTimeout()"
您的代码将是这样的:
btndec: function() {
var $this,
timer;
$this = $(this).parent().find('.bfh-number').data('bfhnumber');
if ($this.$element.is('.disabled') || $this.$element.attr('disabled') !== undefined) {
return true;
}
// $this.decrement();
timer = setTimeout(function() {
var interval;
interval = setTimeout(function() {
$this.decrement();
}, 0);
$this.$element.data('interval', interval);
}, 600);
$this.$element.data('timer', timer);
$(document).one('mouseup', {btn: $this}, BFHNumber.prototype.mouseup);
return true;
}
我已经实现了 Bootstrap form helper: time picker plugin,它在我的桌面浏览器上运行正常。这是代码:
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" class="form-horizontal" role="form">
<div class="form-group">
<label for="start_time" class="col-sm-2 control-label">Start time</label>
<div class="col-sm-10">
<div class="bfh-timepicker" id="start_time" data-name="start_time">
</div>
</div>
</div>
</form>
这是结果:
这是我点击后的结果:
正如我所说,这在我的桌面浏览器上运行良好 (Google Chrome)。但是在我的手机 phone(HTC One 使用 Google Chrome)上,时间选择器无法正常工作。我可以像在第一个图中那样单击它,但是当我尝试使用向上和向下箭头输入时间时,没有任何反应。
如何解决这个问题?
编辑:使用 IE 在我的手机 phone 上试过,仍然是同样的问题。
如评论中所述,似乎很少有人支持使用此插件。我最终改用 https://github.com/Eonasdan/bootstrap-datetimepicker。
第一次改变
.on('mousedown.bfhnumber.data-api', '.inc', BFHNumber.prototype.btninc)
.on('mousedown.bfhnumber.data-api', '.dec', BFHNumber.prototype.btndec);
至
.on('touchstart.bfhnumber.data-api mousedown.bfhnumber.data-api', '.inc', BFHNumber.prototype.btninc)
.on('touchstart.bfhnumber.data-api mousedown.bfhnumber.data-api', '.dec', BFHNumber.prototype.btndec);
然后找到 "btninc" 和 "btndec" 函数
评论
$this.increment();
$this.decrement();
将"etInterval()"细化为"setTimeout()"
您的代码将是这样的:
btndec: function() {
var $this,
timer;
$this = $(this).parent().find('.bfh-number').data('bfhnumber');
if ($this.$element.is('.disabled') || $this.$element.attr('disabled') !== undefined) {
return true;
}
// $this.decrement();
timer = setTimeout(function() {
var interval;
interval = setTimeout(function() {
$this.decrement();
}, 0);
$this.$element.data('interval', interval);
}, 600);
$this.$element.data('timer', timer);
$(document).one('mouseup', {btn: $this}, BFHNumber.prototype.mouseup);
return true;
}