输入类型 URL - 如果不包含 HTTP，则显示“请输入 URL”答案

【问题标题】：Input Type URL - Says "Please enter a URL" if HTTP is not included输入类型 URL - 如果不包含 HTTP，则显示“请输入 URL”
【发布时间】：2011-09-26 01:19:11
【问题描述】：

我一直在处理表单并遇到了障碍。我一直在使用 input type="url" 以便 iPad 和 iPhone 等都调出正确的键盘 - 并尝试遵循新标准。

我遇到了一个问题。在不需要需要网址的表单上 - 如果用户键入 www.theiraddress.com，大多数浏览器都会用红色/黄色勾勒它，以通知用户他们需要输入“http://”在它之前。

我已使用 input:invalid css 删除该轮廓。

但是现在当用户提交表单时，浏览器会抛出“请输入 URL”的错误。

该字段不是必需的 - 我只是想让人们更容易输入他们的地址 - 但仍然在移动设备等上显示正确的键盘。

有没有办法消除这个阻止用户提交表单的烦人工具提示？

【问题讨论】：

这能回答你的问题吗？ Disable validation of HTML5 form elements

标签： html forms url input

【解决方案1】：

您可以向表单元素添加 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

【讨论】：

【解决方案2】：

如果我理解正确，你希望当用户输入没有http://的url时，自动在url前面添加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()" />

将www.myurl.com 替换为http://www.myurl.com

如果http://www.myurl.com 或https://www.myurl.com 没有任何反应

注意：如果myurl.com域支持SSL(https:)，浏览器会自动将http://www.myurl.com转换成https://www.myurl.com

工作演示：http://jsfiddle.net/Yeti82/281a4hs8/

【讨论】：

【解决方案3】：

根据引用页面的底部 (http://www.wufoo.com/html5/types/3-url.html)，您可以使用文本输入类型和 inputmode 属性 (http://www.wufoo.com/html5/attributes/23-inputmode.html) 来访问移动设备上的键盘，而不必担心文本字段。

【讨论】：

【解决方案4】：

据我所知，根据标准，协议是必需的（Url input field implementation state）。您也可以使用正则表达式来验证该字段，例如 /^(?:(http|https|ftp):\/\/)?(?:[\w-]+\.)+[a-z]{2,6}(\/)?/i

【讨论】：