输入类型URL - 如果不包含HTTP，则说“请输入URL”

Question

我一直在做一个表格，遇到了障碍。我一直在使用输入类型=“url”，以便iPad和iPhone等都能拉出正确的键盘 - 并尝试遵循新标准。

我遇到了一个问题。在不需要Web地址的表单上 - 如果用户在www.theiraddress.com中输入，大多数浏览器会以红色/黄色标出它以通知用户他们需要在其前输入“http：//”。

我使用了输入：无效的css来删除该大纲。

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

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

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

Answer 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

Answer 2

根据引用页面的底部（http://www.wufoo.com/html5/types/3-url.html），您可以使用文本输入类型和inputmode属性（http://www.wufoo.com/html5/attributes/23-inputmode.html）来访问移动设备上的键盘，而无需对文本字段进行繁琐的操作。

Answer 3

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

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;
	//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没有任何反应

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

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