Adres URL typu wejściowego - mówi "Wprowadź adres URL", jeśli HTTP nie jest dołączony.

Question

Pracowałem nad formularzem i wpadłem w szkopuł. Używałem input type = "url", aby iPady i iPhony itp. Podciągały poprawną klawiaturę - i próbowały podążać za nowymi standardami.

Wpadłem jednak na problem. W formularzu, w którym wymagany jest adres strony internetowej: , a nie - jeśli użytkownik wpisze na stronie www.theiraddress.com, większość przeglądarek nakieruje go na czerwono/żółto, aby powiadomić użytkownika, że ​​musi przed nim wpisać "http: //".

Użyłem danych wejściowych: nieprawidłowe css do usunięcia tego konturu.

Jednak teraz, gdy użytkownik przesyła formularz, przeglądarka zgłasza błąd z napisem "Wprowadź adres URL".

Pole nie jest wymagane - Chciałem tylko, aby ułatwić dla ludzi, aby wprowadzić ich adresy - ale nadal wyświetla odpowiednie klawiatur telefonów komórkowych itp

Czy istnieje sposób, aby usunąć ten przykry że podpowiedź uniemożliwia użytkownikom przesłanie formularza?

Answer 1

Możesz dodać atrybut novalidate do elementu formularza. Fx:

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

Zobacz https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate

Zrobione z tej odpowiedzi: https://stackoverflow.com/a/3094185/1497627

Answer 2

O ile mi wiadomo, zgodnie ze standardem wymagany jest protokół (Url input field implementation state). Można alternatywnie użyć wyrażenia regularnego, aby potwierdzić, że takich dziedzinach, jak /^(?:(http|https|ftp):\/\/)?(?:[\w-]+\.)+[a-z]{2,6}(\/)?/i

Answer 3

Według dole strony odwołuje (http://www.wufoo.com/html5/types/3-url.html) można wykorzystać typ wprowadzania tekstu i atrybut inputmode (http://www.wufoo.com/html5/attributes/23-inputmode.html), aby dostać się do klawiatury na urządzeniach mobilnych bez bycia wybrednym w polu tekstowym.

Answer 4

Jeśli dobrze rozumiem, chcesz, że gdy użytkownik wprowadzi adres URL bez http: //, automatycznie dodaje http: // przód url, tak aby nie wadzie

Spróbuj:

//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()" />

wymienić www.myurl.com z http://www.myurl.com

Nothin g dzieje jeśli http://www.myurl.com lub https://www.myurl.com

Uwaga: http://www.myurl.com automatycznie zostanie przekształcony w https://www.myurl.com przez przeglądarkę, jeśli wsparcie myurl.com domeny SSL(https:)

Praca Demo: http://jsfiddle.net/Yeti82/281a4hs8/