输入类型URL - 如果不包含HTTP，则说“请输入URL”
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了输入类型URL - 如果不包含HTTP，则说“请输入URL”相关的知识，希望对你有一定的参考价值。
我一直在做一个表格，遇到了障碍。我一直在使用输入类型=“url”，以便iPad和iPhone等都能拉出正确的键盘 - 并尝试遵循新标准。
我遇到了一个问题。在不需要Web地址的表单上 - 如果用户在www.theiraddress.com中输入，大多数浏览器会以红色/黄色标出它以通知用户他们需要在其前输入“http：//”。
我使用了输入：无效的css来删除该大纲。
但是，现在当用户提交表单时，浏览器会抛出错误提示“请输入URL”。
该字段不是必需的 - 我只是想让人们更容易输入他们的地址 - 但仍然在移动设备上显示正确的键盘等。
有没有办法删除这个令人烦恼的工具提示，阻止用户提交表单？
您可以向表单元素添加novalidate属性。外汇：
<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
根据引用页面的底部（http://www.wufoo.com/html5/types/3-url.html），您可以使用文本输入类型和inputmode属性（http://www.wufoo.com/html5/attributes/23-inputmode.html）来访问移动设备上的键盘，而无需对文本字段进行繁琐的操作。
据我所知，根据标准，协议是必需的（Url input field implementation state）。您也可以使用正则表达式来验证该字段，例如/^(?:(http|https|ftp)://)?(?:[w-]+.)+[a-z]{2,6}(/)?/i
如果我理解正确，您希望当用户输入不带http：//的网址时，会自动添加网址的http：//以便报告错误
试试这个：
//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()" />以上是关于输入类型URL - 如果不包含HTTP，则说“请输入URL”的主要内容，如果未能解决你的问题，请参考以下文章