इनपुट प्रकार यूआरएल - अगर HTTP शामिल नहीं है तो कृपया "एक यूआरएल दर्ज करें"

Question

मैं एक फॉर्म पर काम कर रहा हूं और एक झटके में भाग रहा हूं। मैं इनपुट प्रकार = "यूआरएल" का उपयोग कर रहा हूं ताकि आईपैड और आईफ़ोन इत्यादि सभी सही कीबोर्ड खींच सकें - और नए मानकों को आजमाएं और उनका पालन करें।

हालांकि मैंने किसी समस्या में भाग लिया है। एक ऐसे फॉर्म पर जहां वेब पता आवश्यक नहीं है - यदि कोई उपयोगकर्ता www.theiraddress.com में टाइप करता है तो अधिकांश ब्राउज़र इसे उपयोगकर्ता को सूचित करने के लिए लाल/पीले रंग में रूपरेखा देते हैं, उन्हें इससे पहले "http: //" दर्ज करना होगा।

मैंने इनपुट का उपयोग किया है: उस रूपरेखा को हटाने के लिए अवैध सीएसएस।

हालांकि अब जब उपयोगकर्ता फॉर्म सबमिट करता है, तो ब्राउज़र "एक यूआरएल दर्ज करें" कहकर एक त्रुटि फेंकता है।

क्षेत्र की आवश्यकता नहीं है - मैं तो बस लोगों को उनके पते दर्ज करने के लिए यह आसान बनाना चाहते थे - लेकिन अभी भी मोबाइल उपकरणों आदि

पर सही कीबोर्ड प्रदर्शित इस कष्टप्रद टूलटिप दूर करने के लिए एक रास्ता है कि उपयोगकर्ताओं को फॉर्म जमा करने से रोकता है?

Answer 1

आप प्रपत्र तत्व के लिए एक novalidate विशेषता जोड़ सकते हैं। Fx:

<form method="post" action="/foo" novalidate>...</form> 

देखें https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate

इस जवाब से लिया: https://stackoverflow.com/a/3094185/1497627

Answer 2

जहां तक ​​मुझे पता है, मानक के अनुसार, प्रोटोकॉल आवश्यक है (Url input field implementation state)। आप वैकल्पिक रूप से के रूप में /^(?:(http|https|ftp):\/\/)?(?:[\w-]+\.)+[a-z]{2,6}(\/)?/i

Answer 3

कि क्षेत्र में इस तरह के मान्य करने के लिए संदर्भित पृष्ठ (http://www.wufoo.com/html5/types/3-url.html) आप मोबाइल उपकरणों पर कुंजीपटल करने के लिए पाठ इनपुट प्रकार और inputmode विशेषता (http://www.wufoo.com/html5/attributes/23-inputmode.html) का उपयोग कर सकते के नीचे के अनुसार एक regexp इस्तेमाल कर सकते हैं पाठ क्षेत्र के बारे में चिंतित होने के बिना।

Answer 4

अगर मैं सही ढंग से समझ, आप चाहते हैं कि जब कोई उपयोगकर्ता बगैर http यूआरएल में प्रवेश करती है: //, स्वचालित रूप से http कहते हैं: // यूआरएल के सामने इतनी के रूप में त्रुटि रिपोर्ट नहीं

इस प्रयास करें:

//PUT THIS IN HEAD 
 

 
function check_url(){ 
 
    //Get input value 
 
    var elem = document.getElementById("url_input"); 
 
    var input_value = elem.value; 
 
\t //Set input value to lower case so HTTP or HtTp become http 
 
\t input_value = input_value.toLowerCase(); 
 
    
 
    //Check if string starts with http:// or https:// 
 
    var regExr = /^(http:|https:)\/\/.*$/m; 
 
    
 
    //Test expression 
 
    var result = regExr.test(input_value); 
 
\t 
 
\t //If http:// or https:// is not present add http:// before user input 
 
    if (!result){ 
 
\t \t var new_value = "http://"+input_value; 
 
\t \t elem.value=new_value; 
 
    } 
 
}

Try to input www.myurl.com<br /> 
 
Try to input http://www.myurl.com<br /> 
 
Try to input https://www.myurl.com<br /><br /> 
 
URL INPUT:<br /> 
 
<input type="url" id="url_input" name="url_input" /><br /><br /> 
 
<input type="button" value="Submit!!" onclick="check_url()" />

साथ http://www.myurl.com

नथिंग www.myurl.com बदलें ग्राम होता है अगर http://www.myurl.com या https://www.myurl.com

नोट: http://www.myurl.com स्वचालित रूप से ब्राउज़र द्वारा https://www.myurl.com में परिवर्तित किया जाएगा यदि myurl.com डोमेन समर्थन SSL(https:)

कार्य डेमो: http://jsfiddle.net/Yeti82/281a4hs8/