사용자 입력을 허용하지 않는 텍스트 입력이있는 jQuery Datepicker


140

텍스트 상자 입력과 함께 jQuery Datepicker를 어떻게 사용합니까?

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

사용자가 텍스트 상자에 임의의 텍스트를 입력 할 수 없습니다. 텍스트 상자에 포커스가 있거나 사용자가 클릭 할 때 Datepicker가 팝업되기를 원하지만 텍스트 상자가 키보드 (복사 및 붙여 넣기 또는 기타)를 사용하는 사용자 입력을 무시하고 싶습니다. Datepicker 달력에서 독점적으로 텍스트 상자를 채우고 싶습니다.

이게 가능해?

jQuery 1.2.6
날짜 선택기 1.5.2

답변:


269

텍스트 입력 에서 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 (및 기타 브라우저)이 읽기 전용 속성에 추가하는 기본 스타일은 실제로 불쾌하므로 무시하십시오.
Damon

1
@FooBar 실용적인 솔루션을 제안했습니다. readonly 속성을 설정하기 위해 현재 선호하는 방법 (의견이 있기 때문에 시간이 지남에 따라)은 prop () 메서드를 사용하는 것입니다.$("#my_txtbox").prop('readonly', true)
Werner

2
WC3 HTML 사양에 따라 true / false가없는 유일한 <input readonly> 또는 <input readonly = "readonly"> w3.org/TR/html5/forms.html#the-readonly-attribute
Ankit Sharma

5
클릭 할 수 있도록 커서 포인터를 사용합니다<input ... readonly="readonly" style="cursor:pointer; background-color: #FFFFFF">
Benjamin Lucidarme

61

내 경험을 바탕으로 Adhip Gupta가 제안한 솔루션을 추천합니다.

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

다음 코드는 사용자가 새 문자를 입력 없지만 문자를 삭제할 수 있도록합니다.

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

또한 JavaScript를 비활성화 한 사용자에게는 양식이 쓸모 없게됩니다.

<input type="text" readonly="true" />

3
OP는 자바 스크립트 비활성화 시나리오로 인해이를 답변으로 표시하는 것을 고려해야합니다.
CeejeeB

7
자바 스크립트가 비활성화 된 일반 웹 사이트를 사용하는 병렬 우주 사람들은 무엇입니까?
d.raev

JavaScript가 비활성화 된 경우이 JAVASCRIPT가 어떻게 도움이됩니까?
PW Kad

1
@PWKad는 readonlyJS를 통해 필드에 속성을 추가하여 JavaScript가 비활성화되어 있으므로 날짜 선택기를 사용할 수없는 경우에도 표준 수동 입력을 통해 양식을 계속 사용할 수 있습니다.
Jonathan Bender

2
작성 시점에서 이것은 jQuery를 사용하여 읽기 전용 속성을 설정하는 기본 방법입니다 $("#my_txtbox").prop('readonly', true).
베르너

13

시험

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

<asp : textbox> readonly 속성을 "true"로 설정하면 멋지게 재생되지 않기 때문에 asp.net과 함께 이것을 성공적으로 사용했습니다
Russ Cam

2
이것은 나중에 참조하기 위해 누군가가 텍스트 상자에 값을 붙여 넣는 것을 막지 않습니다.
Erik Philips

10

여러 곳에서 날짜 선택기를 재사용하는 경우 다음과 같은 방법으로 JavaScript를 통해 텍스트 상자를 수정하는 것이 좋습니다.

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

날짜 선택기를 초기화 한 장소 바로 앞 / 뒤


6
<input type="text" readonly="true" />

포스트 백 후 텍스트 상자의 값이 손실됩니다.

오히려 완벽하게 작동하는 Brad8118의 제안을 사용해야합니다.

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

편집 : IE에서 작동하게하려면 'keypress'대신 'keydown'을 사용하십시오.


4
$("#txtfromdate").datepicker({         
    numberOfMonths: 2,
    maxDate: 0,               
    dateFormat: 'dd-M-yy'       
}).attr('readonly', 'readonly');

jquery에 readonly 속성을 추가하십시오.


4

이 작업을 수행 할 수있는 두 가지 옵션이 있습니다. (내가 아는 한)

  1. 옵션 A : 텍스트 필드를 읽기 전용으로 만드십시오. 다음과 같이 수행 할 수 있습니다.

  2. 옵션 B : 커서 초점을 변경하십시오. 흐림 효과를 설정하십시오. onfocus="this.blur()"날짜 선택기 텍스트 필드에 속성 을 설정하여 수행 할 수 있습니다 .

전의: <input type="text" name="currentDate" id="currentDate" onfocus="this.blur()" readonly/>


2
흐림 해킹은 정말 대단했습니다. 이 필드는 Chrome의 필드에서 거대한 빨간색 중지를 얻을 때 일부 사용자를 혼란스럽게하는 읽기 전용 일 필요는 없었습니다. 잘라 내기 및 붙여 넣기, 삭제, 입력 등을 방지하고 jquery datepicker는 여전히 잘 작동합니다. ...
David C

4

날짜 선택기를 초기화 한 후 :

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

        $(".project-date").keydown(false);

또는 한 걸음$(".project-date").datepicker().keydown(false);
Christian Lescuyer

3

게인 포커스에서 datepicker가 팝업되도록하려면 :

$(".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입니다.


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;
}

1

이 스레드는 오래되었지만 동일한 문제가 발생하는 다른 사람들에게는 @ Brad8118 솔루션을 구현합니다 (입력을 읽기 전용으로 선택하면 사용자가 datepicker에서 삽입 된 날짜 값을 삭제할 수 없기 때문에 선호합니다) 그가 선택)도) @ErikPhilips이 필요하는 제안 (값을 붙여에서 사용자를 방지하기 위해 필요한 경우, I는 나를 위해 일한, 여기이 추가하자 $("#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;


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');
    }
});

0

텍스트 상자 컨트롤에서 사용자 입력을 제한 할 때 jquery를 사용하고 싶지 않습니다.

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

<input type="text" id="my_txtbox" readonly="true"/>


0

텍스트 상자를 사용하는 대신 버튼을 사용할 수도 있습니다. 사용자가 날짜를 수동으로 쓰지 않기를 원하는 경우 가장 효과적입니다.

여기에 이미지 설명을 입력하십시오


0

이 질문에 이미 답변되어 있으며 가장 많이 사용하는 것이 readonly좋습니다.
시나리오와 답변을 공유하고 싶습니다.

추가 한 후 readonly내에 속성을 HTML 요소 , 내가 만들 수 없습니다 오전 문제를 직면 한 같은 속성을 required동적으로. HTML 생성 시간 과 HTML 생성 시간
으로 설정을 시도 했습니다.readonlyrequired

따라서 readonly설정하고 싶다면 사용하지 않는 것이 좋습니다 required.

대신 사용

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

$("#my_txtbox").keypress(function(event) {
    return ( ( event.keyCode || event.which ) === 9 ? true : false );
});

tab키만 누를 수 있습니다. 바이 패스하려는 키 코드
더 추가 할 수 있습니다 .

나는 코드 아래에 나는 모두를 추가 한 이후 readonlyrequired여전히 양식을 제출합니다.
제거한 후 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

시간 선택기의 ID (IDofDatetimePicker)를 ID로 바꿉니다.

이렇게하면 사용자가 추가 키보드 입력을 입력 할 수 없지만 여전히 시간 팝업에 액세스 할 수 있습니다.

$ ( "# my_txtbox"). keypress (function (event) {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.
피터 Bowers

-1

또는 예를 들어 숨겨진 필드를 사용하여 값을 저장할 수 있습니다.

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

그리고 $ ( "# my_txtbox"). datepicker ({옵션 :

        onSelect: function (dateText, inst) {
            $("#<% =hfDay.ClientID %>").val(dateText);
        }

-1

사용자가 날짜 선택기에서 날짜를 선택하지만 사용자가 텍스트 상자 안에 입력하지 못하게하려면 다음 코드를 사용하십시오.

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

});

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.