đây là cách tôi đang cố gắng
<script type="text/javascript">
$(document).ready(function(){
$('#dateIn,#dateOut').click(function(e){
e.preventDefault();
});
});
</script>
nhưng đầu vào vẫn 'khởi chạy' bàn phím của iphone
ps: tôi muốn làm điều này vì tôi đang sử dụng plugin datepicker cho ngày
Câu trả lời:
Bằng cách thêm thuộc tính readonly(hoặc readonly="readonly") vào trường nhập, bạn sẽ ngăn không cho bất kỳ ai nhập bất kỳ thứ gì vào đó, nhưng vẫn có thể khởi chạy sự kiện nhấp chuột vào trường đó.
Điều này cũng hữu ích trong các thiết bị không phải di động khi bạn sử dụng bộ chọn ngày / giờ
readonlyvì một số tiện ích không ràng buộc sự kiện trên readonlyđầu vào.
Bạn có thể thêm một hàm gọi lại vào DatePicker của mình để yêu cầu nó làm mờ trường nhập trước khi hiển thị DatePicker.
$('.selector').datepicker({
beforeShow: function(){$('input').blur();}
});
Lưu ý: Bàn phím iOS sẽ xuất hiện trong một phần giây và sau đó ẩn.
Vì tôi không thể bình luận về nhận xét trên cùng, nên tôi buộc phải gửi "câu trả lời".
Vấn đề với câu trả lời đã chọn là việc thiết lập trường chỉ đọc sẽ đưa trường ra khỏi thứ tự tab trên iPhone. Vì vậy, nếu bạn muốn nhập biểu mẫu bằng cách nhấn "tiếp theo", bạn sẽ bỏ qua ngay trường này.
Tôi đã hỏi một câu hỏi tương tự ở đây và nhận được một câu trả lời tuyệt vời - hãy sử dụng trình chọn ngày gốc của iPhone - điều đó thật tuyệt.
Cách tắt bàn phím iPhone cho một trường nhập cụ thể trên trang web
Tóm tắt nội dung / mã giả:
if small screen mobile device
set field type to "date" - e.g. document.getElementById('my_field').type = "date";
// input fields of type "date" invoke the iPhone datepicker.
else
init datepicker - e.g. $("#my_field").datepicker();
Lý do cho việc đặt động loại trường thành "date" là Opera sẽ bật lên trình chọn ngày gốc của riêng nó, và tôi giả sử bạn muốn hiển thị trình chọn ngày nhất quán trên các trình duyệt máy tính để bàn.
Mã dưới đây phù hợp với tôi:
<input id="myDatePicker" class="readonlyjm"/>
$('#myDatePicker').datepicker({
/* options */
});
$('.readonlyjm').on('focus',function(){
$(this).trigger('blur');
});
Cách tốt nhất để giải quyết vấn đề này theo ý kiến của tôi là Sử dụng "ignoreReadonly".
Đầu tiên, hãy làm cho trường đầu vào chỉ đọc, sau đó thêm ignoreReadonly: true. Điều này sẽ đảm bảo rằng ngay cả khi trường văn bản chỉ được đọc, cửa sổ bật lên sẽ hiển thị.
$('#txtStartDate').datetimepicker({
locale: "da",
format: "DD/MM/YYYY",
ignoreReadonly: true
});
$('#txtEndDate').datetimepicker({
locale: "da",
useCurrent: false,
format: "DD/MM/YYYY",
ignoreReadonly: true
});
});
Vì vậy, đây là giải pháp của tôi (tương tự như câu trả lời của John Vance):
Đầu tiên, hãy truy cập vào đây và nhận một chức năng để phát hiện trình duyệt di động.
http://detectmobileb Browse.com/
Họ có nhiều cách khác nhau để phát hiện xem bạn có đang sử dụng thiết bị di động hay không, vì vậy hãy tìm một cách phù hợp với những gì bạn đang sử dụng.
Trang HTML của bạn (mã giả):
If Mobile Then
<input id="selling-date" type="date" placeholder="YYYY-MM-DD" max="2999-12-31" min="2010-01-01" value="2015-01-01" />
else
<input id="selling-date" type="text" class="date-picker" readonly="readonly" placeholder="YYYY-MM-DD" max="2999-12-31" min="2010-01-01" value="2015-01-01" />
JQuery:
$( ".date-picker" ).each(function() {
var min = $( this ).attr("min");
var max = $( this ).attr("max");
$( this ).datepicker({
dateFormat: "yy-mm-dd",
minDate: min,
maxDate: max
});
});
Bằng cách này, bạn vẫn có thể sử dụng công cụ chọn ngày gốc trên thiết bị di động trong khi vẫn đặt ngày tối thiểu và ngày tối đa theo cách này.
Trường không dành cho thiết bị di động chỉ nên được đọc vì nếu trình duyệt di động như chrome for ios "yêu cầu phiên bản dành cho máy tính để bàn" thì chúng có thể kiểm tra thiết bị di động và bạn vẫn muốn ngăn bàn phím hiển thị.
Tuy nhiên, nếu trường chỉ được đọc, nó có thể trông người dùng giống như họ không thể thay đổi trường. Bạn có thể khắc phục điều này bằng cách thay đổi CSS để làm cho nó trông giống như nó không chỉ đọc (tức là thay đổi màu đường viền thành màu đen) nhưng trừ khi bạn đang thay đổi CSS cho tất cả các thẻ đầu vào, bạn sẽ khó giữ giao diện nhất quán. các trình duyệt.
Để có được arround, tôi chỉ cần thêm một nút hình ảnh lịch vào bộ chọn ngày. Chỉ cần thay đổi mã JQuery của bạn một chút:
$( ".date-picker" ).each(function() {
var min = $( this ).attr("min");
var max = $( this ).attr("max");
$( this ).datepicker({
dateFormat: "yy-mm-dd",
minDate: min,
maxDate: max,
showOn: "both",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date"
});
});
Lưu ý: bạn sẽ phải tìm một hình ảnh phù hợp.
@ Rene-pot là chính xác. Tuy nhiên, bạn sẽ có dấu hiệu không được phép trên phiên bản máy tính để bàn của trang web. Giải quyết vấn đề này, hãy áp dụng readonly = "true" cho một div sẽ chỉ hiển thị trên chế độ xem trên thiết bị di động chứ không phải trên máy tính để bàn. Xem những gì chúng tôi đã làm tại đây http://www.naivashahotels.com/naivasha-hotels/lake-naivasha-country-club/