jQuery Datepicker с вводом текста, который не позволяет вводить данные пользователем

142

Как использовать jQuery Datepicker с вводом текстового поля:

$("#my_txtbox").datepicker({
  // options
});

это не позволяет пользователю вводить случайный текст в текстовое поле. Я хочу, чтобы Datepicker всплывал, когда текстовое поле получает фокус или пользователь нажимает на него, но я хочу, чтобы текстовое поле игнорировало любой ввод пользователя с клавиатуры (копирование и вставка или любое другое). Я хочу заполнить текстовое поле исключительно из календаря Datepicker.

Это возможно?

jQuery 1.2.6
Datepicker 1.5.2

Эллиот Варгас
источник

Ответы:

273

Вы должны иметь возможность использовать атрибут readonly для ввода текста, и jQuery по-прежнему сможет редактировать его содержимое.

<input type='text' id='foo' readonly='true'>
Адам Беллэр
источник
30
Для людей, у которых отключен Javascript, я бы оставил поле ввода только в HTML, а бит jQuery поместил бы атрибут readonly на загрузку страницы $ (document) .ready (function () {$ ("# my_txtbox"). Attr 'readOnly', 'true'); }); Таким образом, пользователи с отключенным JS все еще могут выбирать дату
SimonGates
6
это здорово .. однако стиль по умолчанию, который Chrome (и, возможно, другие браузеры) добавляет к атрибутам readonly, действительно неприятен, поэтому обязательно переопределите его
Дэймон
1
@FooBar Вы предложили практическое решение; просто обратите внимание, что текущий предпочтительный способ (прошло некоторое время с момента вашего комментария) для установки атрибута readonly с помощью метода prop ():$("#my_txtbox").prop('readonly', true)
Вернер,
2
Согласно спецификации HTML WC3, это только <input readonly> или <input readonly = "readonly"> без true / false w3.org/TR/html5/forms.html#the-readonly-attribute
Анкит Шарма,
5
Я бы использовал указатель курсора, чтобы он выглядел интерактивным<input ... readonly="readonly" style="cursor:pointer; background-color: #FFFFFF">
Бенджамин Люсидарм
61

Исходя из своего опыта, я бы порекомендовал решение, предложенное Адипом Гуптой:

$("#my_txtbox").attr( 'readOnly' , 'true' );

Следующий код не позволит пользователю ввести новые символы, но будет позволять им удалить символы:

$("#my_txtbox").keypress(function(event) {event.preventDefault();});

Кроме того, это сделает форму бесполезной для тех, у кого отключен JavaScript:

<input type="text" readonly="true" />
2046
источник
3
OP следует рассмотреть возможность пометить это как ответ из-за сценария отключения JavaScript.
CeejeeB
7
в какой параллельной вселенной люди используют обычный веб-сайт с отключенным javascript?
d.raev
Как бы этот JAVASCRIPT ответил на помощь, если бы JavaScript все равно был отключен?
PW Kad
1
@PWKad, добавив readonlyатрибут в поле через JS, вы гарантируете, что если у них отключен JavaScript (и, следовательно, они не смогут использовать datepicker), они все равно смогут использовать форму через стандартный ввод вручную.
Джонатан Бендер
2
На момент написания, это предпочтительный способ установить атрибут только для чтения с помощью JQuery: $("#my_txtbox").prop('readonly', true);
Werner
13

пытаться

$("#my_txtbox").keypress(function(event) {event.preventDefault();});
Брэд8118
источник
Я успешно использовал это с asp.net, так как установка атрибута <asp: textbox> только для чтения на «true» не очень хороша
Расс Кэм
2
Это не мешает кому-либо вставить значение в текстовое поле для использования в будущем.
Эрик Филипс,
10

Если вы повторно используете средство выбора даты в нескольких местах, было бы возможно изменить текстовое поле также с помощью JavaScript, используя что-то вроде:

$("#my_txtbox").attr( 'readOnly' , 'true' );

сразу после / до места, где вы инициализируете свой датпикер.

Адип Гупта
источник
6
<input type="text" readonly="true" />

заставляет текстовое поле терять свое значение после обратной передачи.

Вам лучше использовать предложение Brad8118, которое отлично работает.

$("#my_txtbox").keypress(function(event) {event.preventDefault();});

РЕДАКТИРОВАТЬ: чтобы заставить его работать для IE, используйте 'keydown' вместо 'keypress'


источник
4
$("#txtfromdate").datepicker({         
    numberOfMonths: 2,
    maxDate: 0,               
    dateFormat: 'dd-M-yy'       
}).attr('readonly', 'readonly');

добавьте атрибут readonly в jquery.

Chenthil
источник
4

У вас есть два варианта сделать это. (Насколько мне известно)

  1. Вариант А. Сделайте текстовое поле доступным только для чтения. Это можно сделать следующим образом.

  2. Вариант Б: изменить курсор на фокусе. Установите ti на размытие. это можно сделать, установив атрибут onfocus="this.blur()"в текстовое поле выбора даты.

Пример: <input type="text" name="currentDate" id="currentDate" onfocus="this.blur()" readonly/>

user2182143
источник
2
взлом размытия был просто потрясающим. Поле не должно быть только для чтения, что смущает некоторых пользователей, когда они получают гигантский красный STOP в поле в Chrome ... он предотвращает вырезание и вставку, удаление, ввод текста и т.д ... и jquery datepicker по-прежнему работает нормально ...
David C
4

После инициализации средства выбора даты:

        $(".project-date").datepicker({
            dateFormat: 'd M yy'
        });

        $(".project-date").keydown(false);
Umutesen
источник
Или одним шагом$(".project-date").datepicker().keydown(false);
Christian Lescuyer
3

Чтобы всплывающее окно выбора даты при фокусировке:

$(".selector").datepicker({ showOn: 'both' })

Если вам не нужен ввод данных пользователем, добавьте это в поле ввода

<input type="text" name="date" readonly="readonly" />
Эдуардо Молтени
источник
3

Я только что наткнулся на это, поэтому делюсь здесь. Вот вариант

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

Матия
источник
2

Я знаю, что эта ветка устарела, но для других, которые сталкиваются с той же проблемой, реализуют решение @ 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;
Мариана Марика
источник
1

Эта демонстрационная версия делает это, помещая календарь поверх текстового поля, чтобы вы не могли его вводить. Вы также можете установить поле ввода только для чтения в HTML, чтобы быть уверенным.

<input type="text" readonly="true" />
Зак
источник
1

HTML

<input class="date-input" type="text" readonly="readonly" />

CSS

.date-input {
      background-color: white;
      cursor: pointer;
}
kayz1
источник
0

Я обнаружил, что плагин jQuery Calendar, по крайней мере для меня, в целом работает лучше для выбора дат.

Джеймс Карран
источник
0
$('.date').each(function (e) {
    if ($(this).attr('disabled') != 'disabled') {
        $(this).attr('readOnly', 'true');
        $(this).css('cursor', 'pointer');
        $(this).css('color', '#5f5f5f');
    }
});
ЛитийD
источник
0

Вот ваш ответ, который является способом решения. Вы не хотите использовать jquery, когда вы ограничили ввод пользователя в элемент управления текстовым полем.

<input type="text" id="my_txtbox" readonly />  <!--HTML5-->

<input type="text" id="my_txtbox" readonly="true"/>
Джонхадка
источник
0

$ ("# my_txtbox"). prop ('только для чтения', истина)

работал как шарм ..

Пракаш Сингх
источник
0

Вместо текстового поля вы также можете использовать кнопку. Лучше всего подходит для меня, когда я не хочу, чтобы пользователи писали дату вручную.

введите описание изображения здесь

Аджай Арора
источник
0

Я знаю, что на этот вопрос уже дан ответ, и большинство из них предложили использовать 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>

Шантарам Тупе
источник
0

замените идентификатор средства выбора времени: IDofDatetimePicker на свой идентификатор.

Это предотвратит дальнейший ввод с клавиатуры пользователем, но, тем не менее, пользователь сможет получить доступ к всплывающему окну времени.

$ ("# my_txtbox"). keypress (функция (событие) {event.preventDefault ();});

Попробуйте этот источник: https://github.com/jonthornton/jquery-timepicker/issues/109

Мохан
источник
0

На этот вопрос есть много старых ответов, и только чтение кажется общепринятым решением. Я считаю, что лучший подход в современных браузерах - использовать inputmode="none"тег ввода HTML:

<input type="text" ... inputmode="none" />

или, если вы предпочитаете делать это в скрипте:

$(selector).attr('inputmode', 'none');

Я не тестировал его тщательно, но он хорошо работает с настройками Android, с которыми я его использовал.

Питер Бауэрс
источник
Я кодировал этот проект в основном для мобильного Android. Ymmv с других платформ.
Питер Бауэрс
-1

Или вы можете, например, использовать скрытое поле для хранения значения ...

        <asp:HiddenField ID="hfDay" runat="server" />

и в $ ("# my_txtbox"). datepicker ({options:

        onSelect: function (dateText, inst) {
            $("#<% =hfDay.ClientID %>").val(dateText);
        }
Steinwolfe
источник
-1

Если вы хотите, чтобы пользователь выбрал дату в окне выбора даты, но не хотите, чтобы пользователь вводил данные в текстовое поле, используйте следующий код:

<script type="text/javascript">
$(function () {
    $("#datepicker").datepicker({ maxDate: "-1D" }).attr('readonly', 'readonly');
    $("#datepicker").readonlyDatepicker(true);

});

Шаббир А. Хусейн
источник