输入类型="url"用于相对URL的情况。

Question

我在创建表单时为用户提供了一个输入框，让他们可以输入自定义链接到页面中（类似于WordPress）。例如：about/awards会被用于http://site.com/pages/about/awards。但是，在某个时间点，这在Chrome浏览器上停止工作了，因为它们现在对input type="url"字段执行更严格的验证。这本来是好事，但是：

• 它不允许相对URL，例如about/awards是一个相对URL，但Chrome似乎拒绝除http://domain/page/stuff之外的所有内容。
• 故障并不特别明显。它只关注表单字段（并不是特别引人注目），并拒绝提交表单。我得到的报告是表单“无法工作”，因为他们没有注意到发生了什么事情，而我花了几分钟才意识到发生了什么事情。

我通过将输入类型切换回来解决了这个问题，但这样做破坏了一些添加的有用功能（例如iPhone上的特殊键盘）。

这是HTML5规范的一部分，还是Chrome实现中的问题？

- Macha

---

@GSto：我的错，忘记了最重要的一句话。 - Macha

您可以在提交时使用“http://”来添加相对URL以使其有效。请参见此处的示例...https://dev59.com/iGMm5IYBdhLWcg3wBrTD#41193579 - Carter Medlin

Answer 1

规范仍在制定中，但从这段引用中可以看出，这可能是Chrome实现的问题（我加粗了重点）：

“用户代理程序可能允许用户将值设置为不是有效绝对URL的字符串，但也可能会自动转义用户输入的字符，以便该值始终是有效的绝对URL（即使这不是用户在界面中看到和编辑的实际值）。用户代理应允许用户将值设置为空字符串。用户代理不得允许用户将U+000A换行符（LF）或U+000D回车符（CR）字符插入值中。” 来源

- GSto

Answer 2

它的意思是，"元素的值不是一个有效的绝对URL时，该元素将遭受类型不匹配的问题。"

- Matthew Flaschen

Answer 3

我正在使用的一种可行的语义解决方法是使用pattern属性允许相对URL：

<input required="required" type="url" pattern="(https?|/).*?" name="sStyleBackgroundImageURL" value="{!sStyleBackgroundImageURL}"></input>

- Daniel Sokolowski

Answer 4

一些浏览器不允许使用相对URL进行验证。相反，应将输入模式属性设置为正则表达式。

- zara khaliq

Answer 5

我的建议是使用一种模式来处理不允许的字符，类似于以下的方式：

<input type="text" pattern="[^\<\>\^\`\{\|\}\r\n\t\f\v]*" placeholder="Your Relative or Absolute Path">

享受...

- MiMFa