У меня есть форма с полем даты с прикрепленным к ней флагом jquery datepicker.
Когда я выбираю поле даты, всплывает datepicker, но затем клавиатура iPad скользит в поле зрения и затушевывает datepicker.
Как предотвратить появление клавиатуры в этой ситуации?
Я использовал слегка модифицированную версию решения Rob Osborne и успешно предотвратил появление клавиатуры на iPad и iPhone.
$(".datePicker").datepicker({
showOn: 'button',
onClose: function(dateText, inst)
{
$(this).attr("disabled", false);
},
beforeShow: function(input, inst)
{
$(this).attr("disabled", true);
}
});
Вместо того, чтобы отключать ввод, вы получите свойство "readonly". Это лучше отключить его, потому что вы можете сохранить форму без ее изменения.
Подробнее информация о readonly.
Как мне удалось справиться с этой проблемой, заставив браузер подумать, что пользователь размыл вход, поэтому он скрывает клавиатуру, прежде чем она успеет показать:
$('blabla')
.datepicker(
{
/* options */
})
.on('focus',function()
{
$(this).trigger('blur');
});
Хорошо работает для меня, где многие другие решения, которые я нашел, не сделали!
Я использовал комбинацию CDeutsch и Rob, чтобы отключить поле ввода, когда пользователь нажимает календарь, а затем активирует поле после закрытия списка дат:
$(".date").datepicker({
showOn: "button",
onClose: function(dateText, inst) { $(this).attr("disabled", false); },
beforeShow: function(dateText, inst) { $(this).attr("disabled", true); },
buttonImage: "/images/calendar.png",
buttonImageOnly: true
});
Преимущество заключается в том, что это позволяет пользователю вручную редактировать дату вручную, щелкая в поле ввода, которое вызывает клавиатуру iPad или использует средство выбора даты, нажав кнопку даты.
Снова спасибо за большой вклад в эту проблему, я застрял в этом же выпуске, пока не прочитал вышеуказанные сообщения.
Если вы используете date-timepicker, опция "beforeShow" недоступна. Только добавление атрибута 'readonly' к введенному вводу полностью отключит выбор даты.
Решение состоит в том, чтобы использовать атрибут 'readonly' для элемента и добавить 'ignoreReadonly: true' в качестве опции для выбора даты.
$(function() {
$('#datetimepicker1').datetimepicker({
format: 'MM-DD-YYYY',
minDate: moment(),
ignoreReadonly: true
});
});<div class='input-group date' id='datetimepicker1'>
<input type='text' id="date" readonly style="cursor: default; background-color: #fff" class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>Не удалось найти способ сделать это, но в итоге я использовал приемлемую работу с помощью функции buttonImage с помощью кнопки buttonImageOnly, а затем отключил поле даты.
$("#id_date").datepicker({
dateFormat: 'yy/mm/dd',
showOn:"button",
buttonImage: "/icons/calendar.gif",
buttonImageOnly: true });
$('#id_date').attr("disabled", true);
Если вы делаете это в форме, убедитесь, что вы снова включили поле перед отправкой или сериализацией формы, или значение не будет отправлено (по крайней мере на iPad). Я делаю следующее в моей функции отправки:
$('#id_date').attr("disabled", false);
var dataString = $('#the_form').serialize();
$.ajax({
type: "POST",
url: 'myurl',
data: dataString,
...
Через три часа и никуда не денутся. У меня нет Iphone, поэтому я пытаюсь сделать это на Android-телефоне под управлением 2.3.
В моем телефоне я все равно получаю клавиатуру каждый раз, ничто не останавливает ее, и я не могу использовать "только чтение", так как он останавливает мой код asp.net4/С# за стрельбой, что немного cr # p, но это как есть.
Итак, мой первоначальный вопрос заключается в том, что эти идеи работают только на Iphones?
веселит
Я нашел способ заставить вышеупомянутые ответы работать для ASP.Net 4. так думал, что буду делиться.
Кажется, что < asp: TextBox ID = "что-то"... > не запускает Javascript или JQuery, поскольку он назначает "специальный" идентификатор типа "ctl00_content....." на стороне сервера, который не совпадает с "# что-то" в коде JQuery. Но благодаря проб и ошибок с помощью этой публикации: -
Извлечь значение из asp: textbox с помощью JQuery
Я решил, что использование следующего (с благодарностью выше плаката) размывает фокус и останавливает мобильные телефоны, показывающие клавиатуру (по крайней мере, мой Android в любом случае:)
$("#<%=sDatepicker.ClientID%>").focus(function () {
$(this).blur();
});
поэтому следующий простой пример кода, используемый с JQuery выше, должен надеяться помочь другим:
<asp:TextBox ID="sDatepicker" OnTextChanged="sDatepicker_changed" AutoPostBack="True" ReadOnly="False"></asp:TextBox>
Конечно, 'sDatepicker_changed' - ваш код за кодом.
protected void sDatepicker_changed(object sender, EventArgs e)
{//do stuff here..}
Я также могу запустить datepicker еще всплывающее окно и использовать мой код за функцией для заполнения другого текстового поля с датой окончания 7 дней с этого.
Казалось бы, это работает только на мобильных телефонах! в браузере он бросает ссылку на объект, не установленную на экземпляр объекта, потому что asp.net решил, что TextBox не существует после обратной передачи, но запускает JavaScript. Выйти из темы, так что больше не будет сказано.
Все отсортированные сейчас:), окружили мой <script>..</script> с помощью <Div> и только отображали его, если нужно запустить код JavaScript, когда я обнаружил, что это мобильное устройство, используя:
bool IsMobile = Page.Request.Browser.IsMobileDevice;
и
if (IsMobile == true)
{
mobileScript.Visible = true;
}
веселит
Trev.
Я считаю, что это решение может работать для всех разных разработчиков времени, но я тестировал его только с помощью выбора даты из XDSoft.
Идея состоит в том, чтобы отключить события мыши (pointer-events: 'none') в элементе input, чтобы клавиатура не отображалась, а затем добавить событие onclick в родительский div, который обтекает input элемент. Событие onclick должно открыть функцию выбора времени.
Пример кода
Это демонстрирует, как устранить проблему при использовании XDSoft datetimepicker.
В решении предполагается, что элемент input обернут внутри элемента div.
(function($){
var originalDateTimePicker = $.fn.datetimepicker;
$.fn.datetimepicker = function(args){
this.each(function(i, dateTimePicker){
dateTimePicker = $(dateTimePicker);
dateTimePicker.closest('div').on('click', function(e){
dateTimePicker.trigger('open');
});
dateTimePicker.css({ 'pointer-events': 'none' });
});
return originalDateTimePicker.apply(this, arguments);
};
})(window.jQuery||window.$);
Я использовал этот код, и он отлично работает... Класс .hasDatepicker для моего ввода, который содержит выбор даты
<script type="text/javascript">
jQuery (document).ready(function() {
var ybdDatePick = jQuery( ".hasDatepicker" );
jQuery(function() {
ybdDatePick.datepicker({ }).attr('readonly','readonly');
ybdDatePick.on('focus',function() {
jQuery(this).trigger('blur');
this.datepicker({ }).attr('readonly','readonly');
}
);
});
});
Используя последнюю версию DatePicker, можно сделать это следующим образом:
//for tablets / phones
$('#yourElement').datepicker().on('show', function (e) {
$(this).trigger('blur');
})
Обратите внимание, что клавиатура может мигать в нижней части экрана в течение секунды, пока не будет введен blur().