Я работал над формой и сталкивался с проблемой. Я использую input type = "url", чтобы iPad и iPhone и т.д. Подтягивали правильную клавиатуру - и старались следовать новым стандартам.
Однако я столкнулся с проблемой. В форме, где веб-адрес не требуется - если пользователь вводит данные на веб-сайте www.theiraddress.com, большинство браузеров выделяют его красным/желтым, чтобы уведомить пользователя, что им нужно ввести "http://" перед ним.
Я использовал вход: недействительный css для удаления этого контура.
Однако теперь, когда пользователь отправляет форму, браузер выдает сообщение об ошибке "Введите URL-адрес".
Поле не требуется - я просто хотел, чтобы людям было проще вводить их адреса, но все же отображать правильные клавиатуры на мобильных устройствах и т.д.
Есть ли способ удалить эту раздражающую всплывающую подсказку, которая запрещает пользователям отправлять форму?
Вы можете добавить атрибут novalidate в элемент формы. Fx:
<form method="post" action="/foo" novalidate>...</form>
См. Https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate
Взято из этого ответа: fooobar.com/questions/19301/...
В нижней части ссылочной страницы (http://www.wufoo.com/html5/types/3-url.html) вы можете использовать тип ввода текста и атрибут inputmode (http://www.wufoo.com/html5/attributes/23-inputmode.html), чтобы перейти на клавиатуру на мобильных устройствах, не беспокоясь о текстовом поле.
Насколько мне известно, в соответствии со стандартом требуется протокол (состояние реализации входного поля Url). Вы также можете использовать регулярное выражение для проверки этого поля, такого как /^ (? /^(?:(http|https|ftp):\/\/)?(?:[\w-]+\.)+[az]{2,6}(\/)?/i
Если я правильно понял, вы хотите, чтобы при входе пользователя в URL-адрес без http://, автоматически добавляет http://front of url, чтобы не сообщать об ошибке
Попробуй это:
//PUT THIS IN HEAD
function check_url(){
//Get input value
var elem = document.getElementById("url_input");
var input_value = elem.value;
//Set input value to lower case so HTTP or HtTp become http
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);
//If http:// or https:// is not present add http:// before user input
if (!result){
var new_value = "http://"+input_value;
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()" />