इस तरह से मैं कोशिश कर रहा हूँ
<script type="text/javascript">
$(document).ready(function(){
$('#dateIn,#dateOut').click(function(e){
e.preventDefault();
});
});
</script>
लेकिन इनपुट चित्र फिर भी iPhone के कीबोर्ड को लॉन्च करता है
पीएस: मैं ऐसा करना चाहता हूं क्योंकि मैं डेट के लिए डेटकॉपर प्लगइन का उपयोग कर रहा हूं
जवाबों:
इनपुट फ़ील्ड में विशेषता readonly(या readonly="readonly") जोड़कर आपको इसमें किसी को भी टाइप करने से रोकना चाहिए, लेकिन फिर भी उस पर एक क्लिक ईवेंट लॉन्च करने में सक्षम होना चाहिए।
यह गैर-मोबाइल उपकरणों में भी उपयोगी है क्योंकि आप एक तिथि / समय पिकर का उपयोग करते हैं
readonlyक्योंकि कुछ विजेट readonlyइनपुट पर ईवेंट को नहीं बांधते हैं।
आप DatePicker दिखाने से पहले इनपुट फ़ील्ड को धुंधला करने के लिए अपने DatePicker में कॉलबैक फ़ंक्शन जोड़ सकते हैं।
$('.selector').datepicker({
beforeShow: function(){$('input').blur();}
});
नोट: iOS कीबोर्ड एक सेकंड के एक अंश के लिए दिखाई देगा और फिर छिपाएगा।
चूंकि मैं शीर्ष टिप्पणी पर टिप्पणी नहीं कर सकता, इसलिए मुझे "उत्तर" प्रस्तुत करने के लिए मजबूर किया गया।
चयनित उत्तर के साथ समस्या यह है कि iPhone पर टैब ऑर्डर से फ़ील्ड को आसानी से पढ़ने के लिए फ़ील्ड सेट करना है। इसलिए यदि आप "अगला" मारकर फ़ॉर्म दर्ज करना पसंद करते हैं, तो आप सीधे फ़ील्ड पर छोड़ देंगे।
मैंने यहां एक समान प्रश्न पूछा और एक शानदार जवाब मिला - आईफोन देशी डेटापिक का उपयोग करें - यह बहुत अच्छा है।
वेब पेज पर निर्दिष्ट इनपुट क्षेत्र के लिए iPhone कीपैड को कैसे बंद करें
सिनॉप्सिस / छद्म कोड:
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();
फ़ील्ड प्रकार को "तिथि" पर गतिशील रूप से सेट करने का कारण यह है कि ओपेरा अपने स्वयं के मूल डेटापिक को पॉप अप कर देगा, और मैं मान रहा हूं कि आप डेस्कटॉप ब्राउज़रों पर डेटपिकर को लगातार दिखाना चाहते हैं।
नीचे कोड मेरे लिए काम करता है:
<input id="myDatePicker" class="readonlyjm"/>
$('#myDatePicker').datepicker({
/* options */
});
$('.readonlyjm').on('focus',function(){
$(this).trigger('blur');
});
मेरी राय के अनुसार इसे हल करने का सबसे अच्छा तरीका "ignReadonly" का उपयोग करना है।
पहले इनपुट फ़ील्ड को आसानी से बनाएं उसके बाद ignReadonly: true जोड़ें। यह सुनिश्चित करेगा कि पाठ क्षेत्र के पढ़ने के बाद भी, पॉपअप दिखाई देगा।
$('#txtStartDate').datetimepicker({
locale: "da",
format: "DD/MM/YYYY",
ignoreReadonly: true
});
$('#txtEndDate').datetimepicker({
locale: "da",
useCurrent: false,
format: "DD/MM/YYYY",
ignoreReadonly: true
});
});
<input inputmode='none'>
inputmodeवैश्विक विशेषता एक enumerated विशेषता है कि डेटा के प्रकार उपयोगकर्ता द्वारा दर्ज किया जा सकता है तत्व या उसकी सामग्री संपादित करते समय पर संकेत। इसके निम्न मूल्य हो सकते हैं:
none- कोई वर्चुअल कीबोर्ड नहीं। जब पृष्ठ अपने स्वयं के कीबोर्ड इनपुट नियंत्रण को लागू करता है।
मैं इसे सफलतापूर्वक उपयोग कर रहा हूं ( Chrome / Android पर परीक्षण किया गया )
CSS-ट्रिक्स: सब कुछ आप कभी भी इनपुटमोड के बारे में जानना चाहते थे
तो यहाँ मेरा समाधान है (जॉन वेंस के जवाब के समान):
सबसे पहले यहां जाएं और मोबाइल ब्राउज़रों का पता लगाने के लिए एक फ़ंक्शन प्राप्त करें।
http://detectmobilebrowsers.com/
आपके पास यह पता लगाने के लिए बहुत सारे तरीके हैं कि क्या आप मोबाइल पर हैं, इसलिए एक ऐसा खोजें जो आपके द्वारा उपयोग किए जा रहे कार्यों के साथ काम करता हो।
आपका HTML पृष्ठ (छद्म कोड):
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
});
});
इस तरह से आप अभी भी मोबाइल में नेटिव डेट सिलेक्टर्स का उपयोग कर सकते हैं, जबकि अभी भी मिनिमम और मैक्सिमम डेट सेट कर रहे हैं।
गैर मोबाइल के लिए फ़ील्ड को केवल इसलिए पढ़ा जाना चाहिए क्योंकि अगर आईओएस के लिए क्रोम जैसे मोबाइल ब्राउज़र "डेस्कटॉप संस्करण का अनुरोध करता है" तो वे मोबाइल की जांच कर सकते हैं और आप अभी भी कीबोर्ड को दिखाने से रोकना चाहते हैं।
हालाँकि यदि फ़ील्ड को केवल पढ़ा जाता है, तो वह उपयोगकर्ता को देख सकता है जैसे कि वे फ़ील्ड को बदल नहीं सकते। आप सीएसएस को बदलकर इसे ठीक कर सकते हैं जैसे कि यह केवल पढ़ने के लिए नहीं है (यानी सीमा-रंग को काले में बदलें) लेकिन जब तक आप सभी इनपुट टैग के लिए सीएसएस नहीं बदल रहे हैं तब तक आपको लुक को लगातार बनाए रखना मुश्किल होगा। ब्राउज़रों।
यह समझने के लिए कि मैं अभी तारीख पिकर के लिए कैलेंडर छवि बटन जोड़ता हूं। बस अपना 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,
showOn: "both",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date"
});
});
नोट: आपको एक उपयुक्त छवि ढूंढनी होगी।
@ रेने-पॉट सही है। हालाँकि आपके पास वेबसाइट के डेस्कटॉप संस्करण पर एक अनुमति नहीं है। इसके आस-पास, एक div पर आसानी से "सच" लागू करें, जो केवल डेस्कटॉप पर नहीं बल्कि मोबाइल दृश्य पर दिखाई देगा। देखें कि हमने यहां क्या किया था http://www.naivashahotels.com/naivasha-hotels/lake-naivasha-country-club/
मेरे पास थोड़ी सामान्य "कोई कीबोर्ड" स्क्रिप्ट नहीं है - मेरे लिए Android और iPhone के साथ काम करता है:
$('.readonlyJim').on('focus', function () {
$(this).trigger('blur')
})
बस readonlyJimइनपुट टैग और वॉइला में क्लास जोड़ें ।
(* क्षमा करें बहुत अधिक स्टार ट्रेक यहाँ)