jQuery Datepicker с текстовым вводом, который не позволяет пользователю вводить данные
-
03-07-2019 - |
Вопрос
Как мне использовать jQuery Datepicker с вводом текстового поля:
$("#my_txtbox").datepicker({
// options
});
это не позволяет пользователю вводить случайный текст в текстовое поле.Я хочу, чтобы указатель даты появлялся, когда текстовое поле фокусируется или пользователь нажимает на него, но я хочу, чтобы текстовое поле игнорировало любой пользовательский ввод с клавиатуры (копирование и вставка или любой другой).Я хочу заполнить текстовое поле исключительно из календаря Datepicker.
Возможно ли это?
jQuery 1.2.6
Выбор даты 1.5.2
Решение
Вы должны быть в состоянии использовать только для чтения добавьте атрибут к текстовому вводу, и jQuery по-прежнему сможет редактировать его содержимое.
<input type='text' id='foo' readonly='true'>
Другие советы
Основываясь на моем опыте, я бы порекомендовал решение, предложенное Адхипом Гуптой:
$("#my_txtbox").attr( 'readOnly' , 'true' );
Следующий код не позволит пользователю вводить новые символы, но будет разрешить им удалять символы:
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
Кроме того, это сделает форму бесполезной для тех, у кого отключен JavaScript:
<input type="text" readonly="true" />
попробуй
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
Если вы повторно используете средство выбора даты в нескольких местах, было бы целесообразно изменить текстовое поле также с помощью JavaScript, используя что-то вроде:
$("#my_txtbox").attr( 'readOnly' , 'true' );
сразу после / перед местом, где вы инициализируете свой datepicker.
<input type="text" readonly="true" />
приводит к тому, что текстовое поле теряет свое значение после обратной передачи.
Вам скорее следует воспользоваться предложением Brad8118, которое работает безукоризненно.
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
Редактировать:чтобы заставить его работать в IE, используйте "keydown" вместо "нажатие клавиши"
$("#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);
To datepicker для всплывающего окна при усилении фокуса:
$(".selector").datepicker({ showOn: 'both' })
Если вам не нужен пользовательский ввод, добавьте это в поле ввода
<input type="text" name="date" readonly="readonly" />
У вас есть два варианта, как это сделать.(Насколько я знаю)
Вариант А: Сделайте свое текстовое поле доступным только для чтения.Это можно сделать следующим образом.
Вариант В: Измените фокус курсора.Установите ti в положение размытие.это можно сделать, настроив атрибут
onfocus="this.blur()"
в текстовое поле средства выбора даты.
Бывший: <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;
}
Я знаю, что этот поток старый, но для других, которые сталкиваются с той же проблемой, которые реализуют решение @Brad8118 (которое я предпочитаю, потому что, если вы решите сделать ввод доступным только для чтения, пользователь не сможет удалить значение даты, вставленное из datepicker, если он выберет), а также необходимо запретить пользователю вставлять значение (как предложил @ErikPhilips), я разрешил это дополнение здесь, которое сработало для меня:$("#my_txtbox").bind('paste',function(e) { e.preventDefault(); //disable paste });
отсюда https://www.dotnettricks.com/learn/jquery/disable-cut-copy-and-paste-in-textbox-using-jquery-javascript
и весь конкретный скрипт, используемый мной (с использованием плагина fengyuanchen / datepicker вместо этого):
$('[data-toggle="datepicker"]').datepicker({
autoHide: true,
pick: function (e) {
e.preventDefault();
$(this).val($(this).datepicker('getDate', true));
}
}).keypress(function(event) {
event.preventDefault(); // prevent keyboard writing but allowing value deletion
}).bind('paste',function(e) {
e.preventDefault()
}); //disable paste;
Я обнаружил, что плагин 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 control.
<input type="text" id="my_txtbox" readonly /> <!--HTML5-->
<input type="text" id="my_txtbox" readonly="true"/>
$("#my_txtbox").prop('только для чтения', true)
сработало как по волшебству..
Я знаю, что на этот вопрос уже дан ответ, и большинство из них предлагается использовать readonly
приписывать.
Я просто хочу поделиться своим сценарием и ответить.
После добавления 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
только ключ.
Вы можете добавить еще коды ключей который вы хотите обойти.
Я приведу ниже код, так как я добавил оба readonly
и required
он по-прежнему отправляет форму.
После удаления readonly
это работает должным образом.
https://jsfiddle.net/shantaram/hd9o7eor/
$(function() {
$('#id-checkbox').change( function(){
$('#id-input3').prop('required', $(this).is(':checked'));
});
$('#id-input3').datepicker();
$("#id-input3").keypress(function(event) {
return ( ( event.keyCode || event.which ) === 9 ? true : false );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet"/>
<form action='https://jsfiddle.net/'>
Name: <input type="text" name='xyz' id='id-input3' readonly='true' required='true'>
<input type='checkbox' id='id-checkbox'> Required <br>
<br>
<input type='submit' value='Submit'>
</form>
замените идентификатор средства выбора времени:IDofDatetimePicker для вашего идентификатора.
Это предотвратит дальнейший ввод данных пользователем с клавиатуры, но, тем не менее, пользователь сможет получить доступ к всплывающему окну time.
$("#my_txtbox").нажатие клавиши(функция(событие) {event.preventDefault();});
Попробуйте это источник:https://github.com/jonthornton/jquery-timepicker/issues/109
На этот вопрос есть много старых ответов, и, похоже, общепринятым решением является только чтение.Я считаю, что лучшим подходом в современных браузерах является использование inputmode="none"
в теге ввода HTML:
<input type="text" ... inputmode="none" />
или, если вы предпочитаете делать это в скрипте:
$(selector).attr('inputmode', 'none');
Я не тестировал его подробно, но он хорошо работает в настройках Android, с которыми я его использовал.
Или вы могли бы, например, использовать скрытое поле для хранения значения...
<asp:HiddenField ID="hfDay" runat="server" />
и в файле $("#my_txtbox").datepicker({ параметры:
onSelect: function (dateText, inst) {
$("#<% =hfDay.ClientID %>").val(dateText);
}
Если вы хотите, чтобы пользователь выбирал дату в окне выбора даты, но вы не хотите, чтобы пользователь вводил ее внутри текстового поля, используйте следующий код :
<script type="text/javascript">
$(function () {
$("#datepicker").datepicker({ maxDate: "-1D" }).attr('readonly', 'readonly');
$("#datepicker").readonlyDatepicker(true);
});