jQuery Datepicker с текстовым вводом, который не позволяет вводить данные пользователем
Как использовать jQuery Datepicker с текстовым полем ввода:
$("#my_txtbox").datepicker({
// options
});
, что не позволяет пользователю вводить произвольный текст в текстовое поле. Я хочу, чтобы Datepicker всплывал, когда текстовое поле получает фокус или пользователь нажимает на него, но я хочу, чтобы текстовое поле игнорировало любой пользовательский ввод с помощью клавиатуры (copy & paste или любой другой). Я хочу заполнить текстовое поле исключительно из календаря Datepicker.
это возможно?
jQuery 1.2.6
Элемент управления datepicker 1.5.2
21 ответ:
вы должны быть в состоянии использовать только для чтения атрибут на вводе текста, и jQuery по-прежнему сможет редактировать его содержимое.
<input type='text' id='foo' readonly='true'>
основываясь на моем опыте, я бы рекомендовал решение, предложенное Adhip Gupta:
$("#my_txtbox").attr( 'readOnly' , 'true' );
следующий код не позволит пользователю вводить новые символы, но будет разрешить им удалять символы:
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
кроме того, это сделает форму бесполезной для тех, у кого отключен JavaScript:
<input type="text" readonly="true" />
Если вы повторно используете выбор даты в нескольких местах, то он будет склонен изменять текстовое поле также с помощью JavaScript, используя что-то вроде:
$("#my_txtbox").attr( 'readOnly' , 'true' );
сразу после / перед местом, где вы инициализируете свой datepicker.
<input type="text" readonly="true" />
приводит к тому, что текстовое поле теряет свое значение после обратной передачи.
вы скорее должны использовать предложение Brad8118, которое отлично работает.
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
изменить: чтобы заставить его работать для IE, используйте "keydown" вместо "keypress"
$("#txtfromdate").datepicker({ numberOfMonths: 2, maxDate: 0, dateFormat: 'dd-M-yy' }).attr('readonly', 'readonly');
добавьте атрибут readonly в jquery.
после инициализации выбора даты:
$(".project-date").datepicker({ dateFormat: 'd M yy' }); $(".project-date").keydown(false);
чтобы datepicker всплывал на усиление фокуса:
$(".selector").datepicker({ showOn: 'both' })
Если вы не хотите вводить данные пользователем, добавьте это в поле ввода
<input type="text" name="date" readonly="readonly" />
у вас есть два варианта чтобы это сделать. (Насколько я знаю)
В: сделать текстовое поле только для чтения. Это можно сделать следующим образом.
Вариант B: измените курсор onfocus. Установите ti для размытия. это можно сделать, установив атрибут
onfocus="this.blur()"
в текстовое поле выбора даты.Ex:
<input type="text" name="currentDate" id="currentDate" onfocus="this.blur()" readonly/>
Я только что наткнулся на это, так что я делюсь здесь. Вот вариант
https://eonasdan.github.io/bootstrap-datetimepicker/Options/#ignorereadonly
вот код.
HTML
<br/> <!-- padding for jsfiddle --> <div class="input-group date" id="arrival_date_div"> <input type="text" class="form-control" id="arrival_date" name="arrival_date" required readonly="readonly" /> <span class="input-group-addon"> <span class="glyphicon-calendar glyphicon"></span> </span> </div>
JS
$('#arrival_date_div').datetimepicker({ format: "YYYY-MM-DD", ignoreReadonly: true });
вот скрипку:
http://jsfiddle.net/matbaric/wh1cb6cy/
моя версия bootstrap-datetimepicker.JS-это 4.17.45
этой демо своего рода делает это, помещая календарь над текстовым полем, так что вы не можете ввести его. Вы также можете установить поле ввода для чтения только в HTML, чтобы быть уверенным.
<input type="text" readonly="true" />
HTML
<input class="date-input" type="text" readonly="readonly" />
CSS
.date-input { background-color: white; cursor: pointer; }
Я обнаружил, что плагин jQuery Calendar, по крайней мере для меня, в целом просто работает лучше для выбора дат.
$('.date').each(function (e) { if ($(this).attr('disabled') != 'disabled') { $(this).attr('readOnly', 'true'); $(this).css('cursor', 'pointer'); $(this).css('color', '#5f5f5f'); } });
вот ваш ответ, который является способом решения.Вы не хотите использовать jquery при ограничении пользовательского ввода в элементе управления textbox.
<input type="text" id="my_txtbox" readonly /> <!--HTML5--> <input type="text" id="my_txtbox" readonly="true"/>
я знаю, что на этот вопрос уже ответили, и большинство предложили использовать
readonly
attribure.
Я просто хочу поделиться своим сценарием и ответа.после добавления
readonly
мой HTML-элемент, я столкнулась с проблемой, что я не в состоянии сделать этой какrequired
динамически.
Даже попробовал установить как обаreadonly
иrequired
в HTML время создания.поэтому я предлагаю не использовать
readonly
если вы хотите установить его в качествеrequired
также.вместо того, чтобы использовать
$("#my_txtbox").datepicker({ // options }); $("#my_txtbox").keypress(function(event) { return ( ( event.keyCode || event.which ) === 9 ? true : false ); });
это позволяет для печати
tab
заменить идентификатор выбора времени: IDofDatetimePicker к вашему id.
Это не позволит пользователю вводить какие-либо дополнительные вводы с клавиатуры, но все же пользователь сможет получить доступ к всплывающему окну времени.
$("#my_txtbox").нажатие клавиши (функция (событие) {событие.preventDefault ();});
попробуйте это источник: https://github.com/jonthornton/jquery-timepicker/issues/109
или можно, например, использовать скрытое поле для хранения значения...
<asp:HiddenField ID="hfDay" runat="server" />
и в $("#my_txtbox").datepicker ({ options:
onSelect: function (dateText, inst) { $("#<% =hfDay.ClientID %>").val(dateText); }
Если вы хотите, чтобы пользователь выбрал дату из datepicker, но вы не хотите, чтобы пользователь вводил внутри текстового поля, используйте следующий код:
<script type="text/javascript"> $(function () { $("#datepicker").datepicker({ maxDate: "-1D" }).attr('readonly', 'readonly'); $("#datepicker").readonlyDatepicker(true); });