사용자 입력을 허용하지 않는 텍스트 입력이있는 jQuery datePicker
-
03-07-2019 - |
문제
텍스트 상자 입력과 함께 jQuery datePicker를 어떻게 사용합니까?
$("#my_txtbox").datepicker({
// options
});
그렇다면 사용자가 텍스트 상자에 임의 텍스트를 입력 할 수는 없습니다. TextBox가 초점을 맞추거나 사용자가 클릭 할 때 DatePicker가 팝업되기를 원하지만 TextBox가 키보드 (복사 및 붙여 넣기 또는 기타)를 사용하여 사용자 입력을 무시하기를 원합니다. DatePicker 캘린더에서 독점적으로 TextBox를 채우고 싶습니다.
이게 가능해?
jQuery 1.2.6
DatePicker 1.5.2
해결책
당신은 그것을 사용할 수 있어야합니다 준비 적 텍스트 입력의 속성 및 jQuery는 여전히 내용을 편집 할 수 있습니다.
<input type='text' id='foo' readonly='true'>
다른 팁
내 경험을 바탕으로 Adhip Gupta가 제안한 솔루션을 추천합니다.
$("#my_txtbox").attr( 'readOnly' , 'true' );
다음 코드는 사용자에게 새 문자를 입력하지 않지만 ~ 할 것이다 문자를 삭제할 수 있습니다.
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
또한, 이는 자바 스크립트를 장애인 한 사람들에게 쓸모없는 양식을 제공합니다.
<input type="text" readonly="true" />
노력하다
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
여러 장소에서 Date-Picker를 재사용하는 경우 다음과 같은 것을 사용하여 JavaScript를 통해 텍스트 상자를 수정하는 것이 적절합니다.
$("#my_txtbox").attr( 'readOnly' , 'true' );
DatePicker를 초기화하는 장소/직전.
<input type="text" readonly="true" />
Postback 후 텍스트 상자가 값을 잃게됩니다.
오히려 완벽하게 작동하는 Brad8118의 제안을 사용해야합니다.
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
편집 : 'keypress'대신 'keydown'을 위해 작동하도록합니다.
$("#txtfromdate").datepicker({
numberOfMonths: 2,
maxDate: 0,
dateFormat: 'dd-M-yy'
}).attr('readonly', 'readonly');
jQuery에 readonly 속성을 추가하십시오.
날짜 선택기 초기화 후 :
$(".project-date").datepicker({
dateFormat: 'd M yy'
});
$(".project-date").keydown(false);
Gain Focus에서 팝업에 대한 DatePicker에게 :
$(".selector").datepicker({ showOn: 'both' })
사용자 입력을 원하지 않으면 입력 필드에 추가하십시오.
<input type="text" name="date" readonly="readonly" />
이 작업을 수행 할 수있는 두 가지 옵션이 있습니다. (내가 아는 한)
옵션 A : 텍스트 필드 만 읽으십시오. 다음과 같이 수행 할 수 있습니다.
옵션 B : 커서 Onfocus를 변경하십시오. 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-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를 사용하고 싶지 않습니다.
<input type="text" id="my_txtbox" readonly /> <!--HTML5-->
<input type="text" id="my_txtbox" readonly="true"/>
$ ( "#my_txtbox"). prop ( 'readonly', 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>
Time Picker : IdofDateTimePicker의 ID를 ID로 바꾸십시오.
이렇게하면 사용자가 추가 키보드 입력을 입력하지 못하지만 여전히 사용자는 Time Popup에 액세스 할 수 있습니다.
$ ( "#my_txtbox"). keypress (function (event) {event.preventDefault ();});
이 출처를 시도하십시오 :https://github.com/jonthornton/jquery-timepicker/issues/109
이 질문에는 많은 오래된 답변이 있으며 Readonly는 일반적으로 인정되는 솔루션 인 것 같습니다. 현대식 브라우저에서 더 나은 접근 방식은 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);
}
사용자가 DatePicker에서 날짜를 선택하도록하려면 사용자가 TextBox 내부에 입력하지 않으려면 다음 코드를 사용하십시오.
<script type="text/javascript">
$(function () {
$("#datepicker").datepicker({ maxDate: "-1D" }).attr('readonly', 'readonly');
$("#datepicker").readonlyDatepicker(true);
});